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内 容 简 介 


本 书面 向 学 习 网 站 开发 与 网 页 制作 的 读者 ,采用 全 新 的 Web 标准 ,以 HTML 5 技术 为 基础 ,由 浅 入 
深 、 完 整 详细 地 介绍 了 如 何 使 用 HTML 5、JavaScript 及 jQuery 进行 Web 前 端的 开发 。 本 书 共 分 为 
14 章 ,主要 内 容 包 括 : HTML 5 概述 ,HTML 5 语言 基础 .HTML 5 页 面 的 布局 与 交互 JavaScript 语言 
基础 .DOM 对 象 及 编程 .使 用 JavaScript 制作 网 页 特效 .HTML 5 高 级 应 用 、jQuery 基础 ,jQuery 选择 
器 ,jQuery 的 基本 操作 、jQuery 的 事件 处 理 、 使 用 jQuery 制作 动画 、jQuery UI 插件 的 应 用 、 综 合 案 
例 宇宙 电子 网 站 。 

本 书 内 容 紧 扣 国家 对 本 科 及 高 等 职业 院 校 培 养 高 级 应 用 型 、 复 合 型 人 才 的 技能 水 平和 知识 结构 的 
要 求 , 全 书 以 一 个 完整 的 项 目 案例 的 开发 思路 为 主线 ,采用 模块 分 解 、 任 务 驱 动 . 子 任务 实现 和 代码 设计 
四 层 结构 ,通过 对 模块 中 每 个 任务 相应 知识 点 的 讲解 及 任务 的 具体 实现 ,引导 读者 学 习 网 页 制作 .设计 、 
规划 的 基本 知识 以 及 项 目 开发 ,测试 的 完整 流程 。 

本 书 适合 作为 本 科 及 高 等 职业 院 校 计算 机 及 相关 专业 的 教材 ,也 可 以 作为 培训 班 网 站 开发 与 网 页 
制作 的 教材 。 
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出 版 说 明 


我 国 高 职高 专 教育 经 过 十 几 年 的 发 展 ,已 经 转向 深度 教学 改革 阶段 。 
教育 部 于 2006 年 12 月 发 布 了 教 高 C2006] 第 16 号 文件 (关于 全 面 提高 高 
等 职业 教育 教学 质量 的 若干 意见 》, 大力 推行 工学 结合 ,突出 实践 能 力 培 
养 , 全 面 提高 高 职高 专 教学 质量 。 

清华 大 学 出 版 社 作为 国内 大 学 出 版 社 的 领跑 者 ,为 了 进一步 推动 高 
职高 专 计算 机 专业 教材 的 建设 工作 ,适应 高 职高 专 院 校 计算 机 类 人 才 培 
养 的 发 展 趋势 ,根据 教 高 C2006] 第 16 号 文件 的 精神 ,2012 年 秋季 开始 了 
切合 新 一 轮 教 学 改革 的 教材 建设 工作 。 该 系列 教材 一 经 推出 ,就 得 到 了 
很 多 高 职 院 校 的 认可 和 选用 ,其 中 部 分 书籍 的 销售 量 超 过 了 3 万 册 。 现 
重新 组 织 优秀 作者 对 部 分 图 书 进行 改版 ,并 增加 了 一 些 新 的 图 书 品 种 。 

目前 ,国内 高 职高 专 院 校 计 算 机 网 络 与 软件 专业 的 教材 品种 繁多 ,但 
符合 国家 计算 机 网 络 与 软件 技术 专业 领域 技能 型 紧缺 人 才 培 养 培训 方 
案 , 并 符合 企业 的 实际 需要 ,能 够 自 成 体系 的 教材 还 不 多 。 

我 们 组 织 国内 对 计算 机 网 络 和 软件 人 才 培 养 模式 有 研究 并 且 有 过 一 
段 实践 经 验 的 高 职高 专 院 校 , 进 行 了 较 长 时 间 的 研讨 和 调研 , 遵 选 出 一 批 
富有 工程 实践 经 验 和 教学 经 验 的 “ 双 师 型 ?教师 ,合力 编写 了 这 套 适用 于 
高 职高 专 计 算 机 网 络 .软件 专业 的 教材 。 

本 套 教 材 的 编写 方法 是 以 任务 驱动 .案例 教学 为 核心 ,以 项 目 开发 为 
主线 。 我 们 研究 分 析 了 国内 外 先进 职业 教育 的 培训 模式 、 教 学 方法 和 教 
材 特色 ,消化 吸收 优秀 的 经 验 和 成 果 。 以 培养 技术 应 用 型 人 才 为 目标 ， 
以 企业 对 人 才 的 需要 为 依据 ,把 软件 工程 和 项 目 管理 的 思想 完全 融入 
教材 体系 ,将 基本 技能 培养 和 主流 技术 相 结 合 ,课程 设置 中 重点 突出 、 
主 辅 分 明 .结构 合理 ,衔接 紧 竣 。 教 材 侧重 培养 学 生 的 实战 操作 能 力 ， 
学 、 思 , 练 相 结合 , 旨 在 通过 项 目 实践 ,增强 学 生 的 职业 能 力 , 使 知识 从 
书本 中 释放 并 转化 为 专业 技能 。 


一 、 教 材 编写 思想 


本 套 教材 以 案例 为 中 心 ,以 技能 培养 为 目标 ,围绕 开发 项 目 所 用 到 的 
知识 点 进行 讲解 ,对 某 些 知 识 点 附 上 相关 的 例题 ,以 帮助 读者 理解 ,进而 
将 知识 转变 为 技能 。 
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考虑 到 是 以 “项 目 设计 ”为 核心 组 织 教学 ,所 以 在 每 一 学 期 配 有 相应 的 实 训 课程 及 项 
目 开发 手册 ,要 求学 生 在 教师 的 指导 下 ,能 结合 本 学 期 所 学 的 知识 内 容 , 相 互 协作 ,综合 应 
用 该 学 期 的 知识 进行 项 目 开发 。 同 时 ,在 本 套 教材 中 采用 了 大 量 的 案例 ,这 些 案例 紧密 地 
结合 书 中 的 各 个 知识 点 ,循序 渐进 ,由 浅 入 深 , 在 整体 上 体现 了 内 容 主 导 、 实 例 解析 、 以 点 
带 面 的 模式 ,配合 课程 后 期 以 项 目 设计 贯穿 教学 内 容 的 教学 模式 。 

软件 开发 技术 具有 种 类 繁多 、 更 新 速度 快 的 特点 。 本 套 教材 在 介绍 软件 开发 主流 技 
术 的 同时 ,帮助 学 生 建 立 软 件 相 关 技 术 的 横向 及 纵向 的 关系 ,培养 学 生 综 合 应 用 所 学 知识 
的 能 力 。 


二 、 从 书 特 色 


本 套 教材 体现 目前 工学 结合 的 教改 思想 ,充分 结合 教改 现状 ,突出 项 目 面向 教学 和 任 
务 驱 动 模式 教学 改革 成 果 , 打 造 立体 化 精品 教材 。 

(1) 参照 和 吸纳 国内 外 优秀 计算 机 网 络 、 软 件 专 业 教材 的 编写 思想 ,采用 本 土 化 的 实 
际 项 目 或 者 任务 ,以 保证 其 有 更 强 的 实用 性 ,并 与 理论 内 容 有 很 强 的 关联 性 。 

(2) 准确 把 握 高 职高 专 软件 专业 人 才 的 培养 目标 和 特点 。 

(3) 充分 调查 研究 国内 软件 企业 ,确定 了 基于 Java 和 . NET 的 两 个 主流 技术 路 线 ,再 
将 其 组 合成 相应 的 课程 链 。 

(4) 教材 通过 一 个 个 的 教学 任务 或 者 教学 项 目 , 在 做 中 学 .学 中 做 ,以 及 边 学 边 做 , 重 
点 突出 技能 培养 。 在 突出 技能 培养 的 同时 ,还 介绍 了 解决 思路 和 方法 ,培养 学 生 未 来 在 就 
业 岗 位 上 的 终身 学 习 能 力 。 

(5) 借鉴 或 采用 项 目 驱动 的 教学 方法 和 考核 制度 ,突出 计算 机 网 络 .软件 人 才 培 训 的 
先进 性 .工具 性 、 实 践 性 和 应 用 性 。 

(6) 以 案例 为 中 心 , 以 能 力 培养 为 目标 ,并 以 实际 工作 的 例子 引入 概念 ,符合 学 生 的 
认 知 规律 。 语 言 简洁 明了 、 清 晰 易 懂 , 更 具 人 性 化 。 

(7) 符合 国家 计算 机 网 络 、 软 件 人 才 的 培养 目标 ;采用 引入 知识 点 ,讲述 知识 点 、 强 化 
知识 点 、 应 用 知识 点 、 综 合 知识 点 的 模式 ,由 浅 入 深 地 展开 对 技术 内 容 的 讲述 。 

(8) 为 了 便于 教师 授课 和 学 生 学 习 , 清 华 大 学 出 版 社 正在 建设 本 套 教材 的 教学 服务 
资源 。 清 华 大 学 出 版 社 网 站 (www. tup. com. cn) 免费 提供 教材 的 电子 课件 .案例 库 等 

高 职高 专 教育 正 处 于 新 一 轮 教学 深度 改革 时 期 ,从 专业 设置 课程 体系 建设 到 教材 建 
设 , 依 然 是 新 课题 。 希 望 各 高 职高 专 院 校 在 教学 实践 中 积极 提出 意见 和 建议 ,并 及 时 反馈 
给 我 们 。 清 华 大 学 出 版 社 将 对 已 出 版 的 教材 不 断 地 修订 、 完 善 ,以 便 提高 教材 质量 ,完善 
教材 服务 体系 ,为 我 国 的 高 职高 专 教育 继续 出 版 优秀 的 高 质量 的 教材 。 
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用 


随 着 HTML 5 规范 的 日 至 完善 和 普及 ,Web 前 端 开发 技术 也 越 来 越 
引 人 注 目 ,如 何 开 发 Web 应 用 程序 ,设计 精美 .独特 的 网 页 已 经 成 为 当前 
的 热门 技术 之 一 。 为 适应 现代 技术 的 飞速 发 展 ,培养 出 技术 能 力 强 、 能 快 
速 适应 网 站 开发 行业 需求 的 高 级 技能 型 人 才 , 帮 助 众多 喜爱 网 站 开发 的 
人 员 提 高 网 站 的 设计 及 编码 水 平 ,编者 结合 自己 多 年 从 事 教学 工作 和 
Web 应 用 开发 的 实践 经 验 ,按照 教学 规律 精心 编写 了 本 书 。 

在 Web 应 用 程序 中 ,大 多 数 网 页 是 由 HTML 语言 设计 的 。 在 
HTML 语言 中 可 以 嵌入 JavaScript 语言 ,为 HTML 网 页 添加 动态 交互 
功能 。 而 jQuery 是 一 套 轻 量 级 的 JavaScript 脚本 库 , 它 是 目前 最 热门 的 
Web 前 端 开发 技术 之 一 。jQuery 的 语法 很 简单 , 它 的 核心 理念 是 “write 
less，do more( 少 写 多 做 )”。 与 其 他 语言 相 比 ,实现 同样 的 功能 时 ,使 用 
jQuery 需要 编写 的 代码 更 少 。 目 前 ,很 多 高 校 的 计算 机 专业 和 IT 培训 班 
都 将 HTML 5 十 jQuery 作为 教学 内 容 之 一 ,这 对 培养 学 生 的 计算 机 应 用 
能 力 具 有 非常 重要 的 意义 。 

本 书 采用 “模块 化 设计 ,任务 驱动 学 习 ” 的 编写 模式 ,在 任务 驱动 学 习 
的 具体 实施 中 ,以 网 站 建设 和 网 页 设计 为 中 心 , 以 实例 为 引导 ,把 介绍 知 
识 与 实例 设计 制作、 分 析 融 于 一 体 ,自始至终 贯穿 于 本 书 中 。 在 实例 的 
设计 、 制 作 过 程 中 ,把 对 应 章节 的 知识 点 融 于 实例 中 ,使 读者 能 够 快速 掌 
握 概念 和 操作 方法 。 

本 书 以 宇宙 电子 案例 网 站 的 设计 与 制作 为 讲解 主线 ,围绕 网 站 栏目 
的 设计 ,全 面 系统 地 介绍 了 网 页 制作 、 设 计 、 规 划 的 基本 知识 以 及 网 站 开 
发 的 完整 流程 。 考 虑 到 网 页 制作 具有 较 强 的 实践 性 ,本 书 配 备 大 量 的 页 
面 例题 和 丰富 的 运行 效果 图 ,能 够 有 效 地 帮助 读者 理解 所 学 的 理论 知识 ， 
系统 全 面 地 掌握 网 页 制作 技术 。 本 书 所 有 案例 均 采 用 案例 驱动 的 讲述 方 
式 , 以 便 深入 浅 出 、 循 序 渐进 地 引导 读者 学 习 。 本 书 在 每 章 之 后 附 有 大 量 
的 实践 操作 习题 ,并 在 教学 课件 中 给 出 习题 答案 , 供 读者 巩固 所 学 的 
内 容 。 

本 书 由 刘 瑞 新 、 张 兵 义 主编 , 罗 东 华 担任 副 主 编 。 具 体 编写 分 工 为 : 
刘 瑞 新 编写 第 1.9、10 章 , 张 兵 义 编写 第 2、11、12 章 , 吕 振 雷 编写 第 3、13 
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章 , 殷 营 编 写 第 4 章 , 罗 东 华 编写 第 5、.14 章 , 李 上 颖 编写 第 7 章 ,第 6 章 由 李 建 彬 、 刘 大 学 、 
陈 周 、 骆 秋 容 、 刘 克 纯 、 缪 丽 丽 、 刘 大 莲 共 同 编写 完成 并 进行 教学 资源 的 制作 ,第 8 章 由 芯 
守 旺 、 庄 建新 、 彭 春芳 、 惟 瑛 瑛 、 翟 丽 娟 、 韩 建 敏 、 庄 恒 、 徐 维 维 、 徐 云 林 、 马 春 锋 、 孙 洪 玲 、 杨 
丽 香 、 杨 占 银 共 同 编写 完成 并 进行 资料 的 整理 、 代 码 的 测试 。 参 加 编写 的 大 部 分 人 员 都 是 
具有 多 年 计算 机 教学 与 培训 以 及 网 站 制作 经 验 的 教师 。 

由 于 编写 水 平 有 限 , 书 中 难免 有 不 足 之 处 ,恳请 读者 提出 宝贵 的 意见 和 建议 。 


编 者 
2018 年 2 月 


| 


1.2 


1.4 


1.5 
1.6 


仿 ;L 


Web 简介 ， 
加 喇 | 
i RL; 
1.3 超 文本 … 
1.4 

1.5 

| 





rr 


.6 搜索 引擎 … 
Web 标准 


1.2.1 什么 是 Web 标准 


1.2.2 建立 Web 标准 的 优点 
1.2.3 ”理解 表现 和 结构 相 分 离 … 
HTML 简介 … 人 


1 二 “ 上 和 轩 玉 发 展 历 禄 和 主音 和 生生 抽 抽 后 
.MM 
1 We a | 
可 TMi 5 的 站 坟 针 风 Jie 
i M$ ey 


1.4.2 HTML 5 编写 规范 …… 
1.4.3 HTML 5 文档 结构 …… 
网 页 文件 的 创建 过 程 … 
搭建 支持 HTML 5 的 浏览 器 环境 


2.1.1 < 一 title 二 标签 
2.1.2 一 meta 二 标签 


目 


WWW 和 浏览 器 的 基本 概念 … 


超 文本 标记 语言 言 
超 文本 传输 协议 TT 





中 Oo 中 中 钙 攻 由己 于 于 


Web 前 端 开发 实例 教程 一 HIM 5+ JavaScript + jQuery 





2.1.3 二 link 二 标签 

2.1.4 二 script 二 标签 … 
文本 元 素 … 
文本 层次 语 i 义 元 来 … 
pe 
文档 结构 元 素 … 





交流 本 -本 汪汪 全 


rE 
2.4.3 缩 排 标签 …… 
2.4.4 水 平 线 标签 ， 本 
2.4.5 案例 一 一 制作 宇宙 电子 业务 简介 页 面 

列表 … ee 






Aaa a 


2. 6. 1 网 页 图 像 的 格式 及 使 用 要 点 eens 
2.6.2 图 像 标签 ee 
2.6.5 案例 一 制作 宇宙 电子 经 营 模式 图 文 简介 页 面 ee 
和 
之 div 沁 标签 
所 span 盖 标签 …: 
2.9.2 二 span 记 与 之 div 放 的 区 别 … oo 
2.9;3 后 用 dh 和 和 sp 村 和 布局 内 容 ee 











第 3 章 HTML 5 页 面 的 布局 与 交互 


3.1 使 用 结 吉 构 元 素 构建 网 页 布局 … Er 


二 section 志 标签 ， 
<<nav 之 标签 … 


1 

2 

3 

4 二 footer 之 标签 
5 <article 之 标签 
6 二 aside 志 标签: 
7 分 组 元 素 ， 

“8 


Ppp 


3.2 页 面 交 互 元 素 … 


3. 2.1 details 元 素 和 summary 元 素 


3.2.2 progress 元 素 









表格 的 结构 …… 
表格 的 基本 语法 … 
表格 的 属性 …… 
跨行 跨 列 表格 ， 
表格 数据 的 分 组 


中 no 性 


表单 标签 


表单 分 组 eee 


DwD- 


第 4 章 JavaScript 语言 基础 pp 


4.1 JavaScript 简介 


4.2 在 网 页 中 插入 JavaScript 的 方法 … 


4.2.1 在 HTML 文档 中 嵌入 脚本 程序 
4.2.2 链接 脚本 文件 ， 


4 半 在 HTML 标签 内 洲 轴 膨 汶 ni 


四 各 赤 、 芝 肢 未 商 参 ass 


站 


二 es ee 
ee 
二 法 蕊 来 ee 
案例 一 一 制作 宇宙 电子 会 员 注册 表单 ee 
合用 表格 布 网 吉 间 we 


Ts 
习题 








| 前端 开发 实例 教程 一 HM_5+ JavaScript + jQuery 





4.3 JavaScript 的 基本 数据 类 型 和 表达 式 TE TE ER 
4.3.1 基本 数据 类 型 ………… 90 
4.3.2 常量 …………: 过 
站 汪 晤 变量 ee | 
4.3.4 运算 符 和 表达 式 .92 

4.4 JavaScript 的 程序 结构 … a 鸭 
和 简单 语句 ep * 94 
4.4.2 程序 控制 流程 0 

4.5.4 JavaScript i 08 

4.6 基于 对 象 的 JavaScript 语言 09 

夫 学 JavaScript 的 内 置 对 象 4 






5.2 window 对 象 - 
5.2.1 window 对 象 的 属性 …… 
5.2.2 window 对 象 的 方法 …… 

5. 3 document 对 象 pp 
5.3.1 document 对象 的 属性 …… 
5.3.2 document 对 象 的 方法 pp 134 

5.4 location 对 象 137 
5.4.1 location 对 象 的 属性 pp 37 
5.4.2 location 对 象 的 方法 pp 137 

5.5 history 对 象 … 8 






| 





5.6 form 对 象 … PP | 
5.6.1 form 对 象 的 属性 … 
5. 6.2 form 对 象 的 方法 ee 
5.7 JavaScript 的 对 象 事件 处 理 程序 40 
案例 一 使 用 form 对 象 实现 Web 页 面 信息 交互 ………………… 153 





en wa wa a 
ww 


< 


第 6 章 ”使 用 JavaScript 制作 网 页 特效 PN 157 


6.1.1 打字 效果 …………………… 
6.1.2 文字 息 楼 滚动 效果 … 
6.2 菜单 与 选项 卡特 效 ， ee 
6.2.1 制作 二 级 纵向 列表 模式 的 导航 菜单 
6.2.2 WT 


”160 
”160 





7.1 _ HTML 5 拖 放 API 74 
7.1.1 draggable 属性 | 
7.1.2 拖 放 触发 的 事件 和 数据 传递 … 175 
72.1 HTML 5 的 多 媒体 支持 i tt tt 奸 也 
7.2.3 人 a 
7.2.4 HTML 5 多 媒体 API … 

7.3 Canvas 绘图 ooooeesoeooesseeoesses 
7.3.1 创建 二 canvas 二 元素 … 
7.3.2 ”构建 绘图 环境 ………… a g 
tn 

vo Gl BO 
7.4.1 Geolocation 基础 ee 196 





| 生前 端 开发 实例 教程 一 HM_5+ JavaScript + jQuery 





7.4.2 Geolocation API 实现 地 理 定 位 ppp 196 
7.5 HTML 5 的 发 展 前 景 .pp 
习题 … 


8.1 jQuery 概述 …………… 
8.1.1 什么 是 jQuery …: 
8.1.2 jQuery 的 特点 

8.2 编写 jQuery 程序 
8.2.1 下 载 与 配置 jQuery e205 
8.2.2 编写 一 个 简单 的 jQuery 程序 206 

8.3 jQuery 对 象 和 DOM 对 象 pp 207 
8.3.1 jQuery 对 象 和 DOM 对 象 简介 pp 207 
8.3.2 jQuery 对 象 和 和 DOM 对 象 的 相互 转换 ennnnnnnnnn; 208 

8.4 jQuery 的 插件 … 后 二 12 
| dg 2 





第 9 章 jQuery 选择 器 216 


9.1 jQuery 选择 器 简介 … pr 
9.1.1 jQuery 的 工厂 函数 ee 216 
9.1.2 什么 是 jQuery 选择 器 ee 216 
9.1.3 en 选择 器 的 优势 pe 217 
9.2.4 复合 选择 器 …: 
9.2.5 通配符 选择 器 …… 

9.3 层次 选择 器 ， ee Ge 
9. 3.1 ancestor descendant( 祖 先后 代 ) 选 
9.3.2 parent 之 child( 父 oa 
9.3.3 prev 十 next( 前 十 后 ) 选 择 器 pp 226 
号 击 过 兄弟 ) 帮 择 内 2 





| 





9.4.3 ”可见 性 过 滤器 231 
9.4.5 去 音 对 象 的 属性 过 滤器 … Se 





10.1.1 


10. 2.1 
10.2.2 设置 CSS 属性 245 
10.3.1 


10.4 操作 DOM 节点 和 和 人 
10. 


4. 
上 
上 

开罗 
上 


到 
10.5 操作 表单 元 素 … 


二 i 0 


1 


10.5.1 
10.5.2 
10,5,3 
10.5.4 
10.5.5 


习题 


修改 CSS 类 








操作 文本 框 … 
操作 文本 域 … ee 区 
操作 单 选 按钮 和 复 选 框 区 267 





第 11 章 jQuery 的 事件 处 理 pe 275 


11.1 jQuery 中 的 事件 处 理 机 制 PN 
11.3 jQuery 中 的 事件 绑 定 
了 
11.3.2 








bind() 方 法 绑 定 事件 i 





Web 前 端 开发 实例 教程 一 HIM_ 5+ JavaScript + jQuery 





11. 3.3 delegate() 方 法 绑 定 事件 282 
Li id 和 
了 .52 Was 二 pp ee 

11. 5.3 模拟 鼠标 连续 单 击 事件 … 








第 12 章 使 用 jQuery 制作 动画 和 304 


12.1 jQuery 的 动画 方法 简介 
12.2 显示 与 隐藏 效果 …………… 
12.2.1 隐藏 元 素 的 方法 … Re a ed 
12. 2.3 切换 元 素 的 显示 状态 pe 308 
2.3.2 淡出 效果 ………… 
2.3.3 元素 的 不 透明 效果 …………… 
2.3.4 交替 淡 人 淡出 效果 … 
12.4 滑动 效果 … 和 
区 未 下 : 测 二 展开 效 划 下 
避 训 风电 岗 兵 交 是 esd 
2.4.3 交替 伸缩 效果 .ee 
12.5 ” 自 定 义 动画 效果 ………… 
2.5.1 创建 自 定义 动画 … 
.2 ste oe ee oe 
12.6 综合 案例 … 0 
2.6.1 制作 折 倒 式 导航 菜单 
2.6.2 图 片 轮 播 效果 … 



















| 





3 rT 


13.1 jQuery UI 概述 ee 


13.1.1 
13.1.2 
13.1.3 
13.1.4 


13. 
13. 
13. 
13. 
13. 
13. 
13. 
13. 
a 


第 14 章 综合 案例 一 一 字 宙 电子 网 站 pp 
庄 守 网站 的 开 必 流程 租 盘 纹 结 椅 汪 站 下 全 aasaaaseasiotaaass 


2. 


mm mo 
oo 0 口 思 上 虽 己 


Ul 


14.1.1 
14.1.2 


ET 


ne i 
er i 
Mn LO 全 和 全 全 和 全 人 夺 让 生 全 全 六 
10uany Wi 的 诗作 闽 理 :二 于 于 于 
9. Geny OT 的 省 用 拉 伞 0 iie ied en 
1 
= i 
I 
7 汪汪 二 汪汪 疏 和 于 和 生生 订 交 生生 证 攻 


旋转 器 插件 ………- 
日 期 选择 器 插件 … 
折 秋 面板 插件 …… 
标签 页 插件 ………- 


网 站 的 开发 流程 一 soinrniens niin na 
Ds 

i 抽 0 
ee 
14.3 ”制作 首页 ee 
14.4 制作 关于 公司 页 
Ee 
让 6 网 站 的 束 客 re 





第 1 章 ”HM 5 概述 


HTML 是 制作 网 页 的 基础 语言 ,是 初学 者 必 学 的 内 容 。 在 学 习 HTML 之 前 ,需要 了 
解 一 些 与 Web 相关 的 基础 知识 ,有 助 于 初学 者 学 习 后 面 讲解 的 相关 章节 内 容 。 本 章 将 对 
网 页 的 基础 知识 .Web 标准 、 编 写 语言 .HTML 5 的 运行 环境 和 创建 方法 进行 详细 讲解 。 


11 Web 简介 
对 于 网 页 设计 开发 者 ,在 动手 制作 网 页 之 前 ,应 该 先 了 解 Web 的 基础 知识 。 


1.1.1 WWW 和 浏览 器 的 基本 概念 


WWW 是 World Wide Web 的 缩写 ,又 称 3W 或 Web, 中 文 译名 为 “万 维 网 ”。 它 作为 
Internet 上 的 新 一 代用 户 界面 , 握 弃 了 以 往 纯 文本 方式 的 信息 交互 手段 ,采用 超 文本 
(HyperText) 方 式 工 作 。 利 用 该 技术 可 以 为 企业 提供 全 球 范围 内 的 多 媒体 信息 服务 ,使 
企业 获取 信息 的 手段 有 了 根本 性 的 改善 。 与 之 密切 相关 的 是 浏览 器 (Browser) 。 

浏览 器 实际 上 就 是 用 于 网 上 浏览 的 应 用 程序 ,其 主要 作用 是 显示 网 页 和 解释 脚本 。 
对 一 般 设计 者 而 言 ,不 需要 知道 有 关 浏 览 器 实现 的 技术 细节 ,只 要 知道 如 何 熟 练 掌握 和 使 
用 它 即 可 。 用 户 只 需要 操作 鼠标 ,就 可 以 得 到 来 自 世 界 各 地 的 文档 ,图片 或 视频 等 信息 。 

浏览 器 种 类 很 多 ,目前 常用 的 有 微软 的 Internet Explorer (简称 IE)、Google 的 
Chrome、Mozilla 的 Firefox、Opera、Apple 的 Safari 和 360 安全 浏览 器 等 ,各 种 常用 浏览 
器 的 Logo 依次 排列 如 图 1-1 所 示 。 


BO0OOE0 


图 1-1 常用 浏览 器 的 Logo 


1. IE 浏览 器 


IE 浏览 器 是 目前 市 场 上 使 用 率 较 高 的 浏览 器 。2014 年 6 月 17 日 ,微软 推出 了 IE 11 
的 正式 版 ,该 版 本 支持 HTML 5、CSS 3 以 及 大 量 的 安全 更 新 。 需 要 说 明 的 是 ,IE 11 不 再 
支持 Windows XP。 
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2. Chrome 


Chrome 是 由 Google 公司 开发 的 网 页 浏览 器 。 它 与 苹果 公司 的 Safari 相 抗 衡 ,浏览 
速度 走 在 众多 浏览 器 的 前 列 , 属 于 高 端 浏览 器 ,其 最 新 版 本 是 Chrome 60。Chrome 浏览 
器 的 代码 是 基于 其 他 开放 源 代 码 软 件 所 编写 ,包括 WebKit 和 Mozilla, 目标 是 提升 稳定 
人 性、 速度 和 安全 性 ,并 创造 出 简单 且 有 效 的 使 用 者 界面 。 





3. Firefox 


Mozilla Firefox( 火 狐 浏览 器 ) 是 现在 市 场 占有 率 排名 第 三 的 浏览 器 , 仅 次 于 Google 
的 Chrome 和 微软 的 下 ,其 最 新 版 本 是 Firefox 54。 最 新 版 大 幅 提升 了 JavaScript 引擎 的 
演 染 速度 ,使 很 多 富 含 图 片 .视频 .游戏 以 及 3D 图 片 的 网 站 和 网 络 应 用 能 够 更 快 地 加 载 
和 运行 。 

4. Opera 


Opera 是 由 Opera Software 开发 的 网 页 浏览 器 ,是 浏览 速度 最 快 的 浏览 器 。Opera 
适用 于 各 种 平台 ,操作 系统 和 髋 入 式 网 络 设备 ,其 最 新 版 本 是 Opera 45。 


5S. Safari 


Safari 是 苹果 计算 机 的 最 新 操作 系统 Mac OS X 中 的 浏览 器 ,用 来 取代 之 前 的 
Internet Explorer for Mac, 目 前 该 浏览 器 已 支持 Windows 平台 。Safari 浏览 器 使 用 
WebKit 引擎 。WebKit 是 自由 软件 ,开放 源 代码 。Safari 浏览 器 的 最 新 版 本 是 Safari 9. 1。 


6. Microsoft Edge 


Microsoft Edge 是 微软 最 新 操作 系统 Windows 10 内 置 的 浏览 器 ,Edge 支持 现代 浏 
览 器 功能 ,比如 扩展 。Edge 浏览 器 的 一 些 功能 包括 : 支持 内 置 Cortana 语音 功能 ,内 置 了 
阅读 器 .笔记 和 分 享 功能 ,设计 注重 实用 和 极 简 主义 ,在 地 址 栏 中 更 快速 地 搜索 ,使 用 “中 
心 ? 将 所 有 的 内 容 存 于 一 处 等 。 

不 同 的 浏览 器 对 网 页 会 有 不 同 的 显示 效果 ,在 Internet Explorer 中 非常 漂亮 的 页 面 ， 
用 其 他 浏览 器 浏览 显示 可 能 是 一 团 糟 。 所 以 ,即使 现在 Internet Explorer 占据 的 市 场 份 
额 较 高 ,也 要 考虑 使 用 其 他 浏览 器 的 用 户 . 也 许 这 些 用 户 正 是 潜在 的 访客 。 因 此 ,最 好 把 
每 个 网 页 都 放 在 不 同 的 浏览 器 里 看 一 下 ,有 什么 问题 马上 解决 。 


1.1.2 URL 


URL(Universal Resource Locator) 是 “统一 资源 定位 器 ”的 英文 缩写 。URL 就 是 
Web 地 址 ,俗称 网址 ”。Internet 上 的 每 一 个 网 页 都 具有 唯一 的 一 个 名 称 标识 ,通常 称 为 
URL 地 址 。 这 种 地 址 可 以 是 本 地 磁盘 ,也 可 以 是 局 域 网 上 的 某 一 台 计 算 机 ,更 多 的 是 
Internet 上 的 站 点 。URL 的 基本 结构 如 下 : 

2 





通信 协议 : /服务器 名 称 [: 通 信 端 口 编号 ]/ 文 件 夹 1[/ 文 件 夹 2..]/ 文 件 名 
各 部 分 含义 如 下 所 述 。 


1. 通信 协议 


通信 协议 是 指 URL 所 链接 的 网 络 服务 性 质 , 如 HTTP 代表 超 文 本 传输 协议 ,FTP 
代表 文件 传输 协议 等 。 


2. 服务 器 名 称 


服务 器 名 称 是 指 提供 服务 的 主机 的 名 称 。 冒 号 后 面 的 数字 是 通信 端口 编号 ,可 有 可 
无 ,这 个 编号 是 用 来 告诉 HTTP 服务 器 的 TCP/IP 软件 该 打开 哪 一 个 通信 端口 。 因 为 一 
台 计 算 机 常常 会 同时 作为 Web、FTP 等 服务 器 使 用 ,为 便于 区 别 , 每 种 服务 器 需要 对 应 一 
个 通信 端口 。 


3. 文件 夹 与 文件 名 


文件 夹 是 存放 文件 的 地 方 ,如 果 是 多 级 文件 目录 ,必须 指定 是 第 一 级 文件 夹 还 是 第 二 
级 、 第 三 级 文件 夹 ,直到 找到 文件 所 在 的 位 置 。 文 件 名 是 指 包括 文件 名 及 扩展 名 在 内 的 完 
整 名 称 。 


1.1.3 超 文本 


超 文 本 (HyperText) 技 术 是 一 种 把 信息 根据 需要 链接 起 来 的 信息 管理 技术 。 用 户 可 
以 通过 一 个 文本 的 链接 指针 打开 另 一 个 相关 的 文本 。 单 击 页 面 中 的 超 链 接 ( 通 常 是 带 下 
划 线 的 条 目 或 图 片 ), 可 跳 转 到 新 的 页 面 或 另 一 位 置 , 获 得 相关 的 信息 。 

超 链接 是 内 散在 文本 或 图 像 中 的 。 文 本 超 链 接 在 浏览 器 中 通常 带 有 下 划 线 , 当 用 户 
的 鼠标 指向 它 时 ,指针 会 变 成 手指 形状 ,如 图 1-2 所 示 。 








图 http//www.sohu.. PD- OX 




















图 1-2 超 链接 指针 形状 
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1.1.4 超 文本 标记 语言 


网 页 是 WWW 的 基本 文档 , 它 是 用 超 文本 标记 语言 (HyperText Markup Language， 
HTML) 编 写 的 。HTML 严格 来 说 并 不 是 一 种 标准 的 编程 语言 , 它 只 是 一 些 能 让 浏览 器 
看 懂 的 标记 。 当 网 页 中 包含 正常 文本 和 HTML 标记 时 ,浏览 器 会 “翻译 ”由 这 些 HTML 
标记 提供 的 网 页 结构 、 外 观 和 内 容 的 信息 ,从 而 将 网 页 按 设计 者 的 要 求 显示 出 来 。 图 1-3 
所 示 的 是 显示 在 Windows“* 记 事 本 ”程序 中 用 HTML 编写 的 网 页 源 代码 ,图 1-4 所 示 的 
是 经 过 浏览 器 “翻译 ”后 显示 的 对 应 该 源 代码 的 网 页 画面 。 


文人 站 坊 昌 ， 相 (0) 







1 | <IDOCTYPE htm1> 

2 | 《!-- [ published at 2017-10-18 07:48;12 ] 一 > 

3| htnl> 

4 | head> 

5 ‘neta http-equiv="Content-type” content="text/html; charset=utf-8" /> 

6 neta http-equiv="X-UA-Conpatible” con ITE=edee” /> 

了 <title? 导 浪 首页 title> 

8 eta nane="keywords”content=" 新 浪 , 新 浪 网 , SIHA, sina, sina com. en, 新 浪 首页 , 
门户 资讯” /> 

9 《neta name="description”content=" 新 浪 网 为 全 球 用 户 24 小 时 提供 全 面 及 时 的 中 文 


资讯 ， 内 容 覆盖 国内 外 突 发 新 司 事件 、 体 坛 赛事 、 娱 乐 时尚 、 产 业 资讯 、 实 用 信息 等 ， 设 有 新 
闻 、 体育 、 娱 乐 、 财 经 、 科 技 、 房 产 、 汽车 等 30 多 个 内 容 频 道 ， 同 时 开设 博客 、 视频 、 论 坛 等 
自由 互动 交流 空间 。”/> 








10 ink rel="masjricon”sires="any”href="//www_sina com, cny favicon syg” 
color= “red >》 

11 eta nane="stencil” content=*PGLS000022” /> 

12 aeta name="publishid” content="30,131,1" /> 

13 neta nane="verify-vl”content="6HtwmypggdgPlNLwTNOuQBI2TY6 


图 1-3 HTML 编写 的 网 页 源 代码 
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1-4 浏览 器 “翻译 ”后 显示 的 网 页 画面 





1.1.5 超 文本 传输 协议 


超 文 本 传输 协议 (HyperText Transfer Protocol, HTTP) 是 用 于 从 WWW 服务 器 传 
输 超 文 本 到 本 地 浏览 器 的 传送 协议 ,用 于 传送 WWW 方式 的 数据 。 当 用 户 想 浏览 一 个 网 
站 时 ,只 要 在 浏览 器 的 地 址 栏 输入 网 站 的 地 址 就 可 以 ,例如 www. baidu. com, 在 浏览 器 的 
地 址 栏 出 现 的 却 是 http://www. baidu. com。 

HTTP 协议 采用 了 请 求 / 响 应 模型 。 客 户 端 向 服务 器 发 送 一 个 请 求 ,请 求 头 包含 请 
求 的 方法 .URI. 协 议 版 本 ,以 及 包含 请 求 修饰 符 、 客 户 信 息 和 内 容 的 类 似 于 MIME 的 消 
息 结构 。 服 务 器 以 一 个 状态 行 作为 响应 ,相应 的 内 容 包 括 消 息 协议 的 版 本 ,成 功 或 者 错误 
编码 加 上 包含 服务 器 信息 ,实体 元 信息 以 及 可 能 的 实体 内 容 。 


1.1.6 搜索 引擎 


搜索 引擎 (Search Engine) 是 指 根据 一 定 的 策略 ,运用 特定 的 计算 机 程序 搜集 互联 网 
上 的 信息 , 青 对 信息 进行 组 织 和 处 理 后 ,为 用 户 提供 检索 服务 的 系统 。 

从 用 户 的 角度 看 ,搜索 引擎 提供 一 个 包含 搜索 框 的 页 面 ,用 户 在 搜索 框 中 输入 词语 ， 
通过 浏览 器 提交 给 搜索 引擎 后 ,搜索 引擎 就 会 返回 与 用 户 输入 的 内 容 相 关 的 信息 列表 。 
搜索 引擎 本 身 是 一 个 网 络 站 点 , 它 能 够 在 WWW 上 主动 搜索 其 他 Web 站 点 中 的 信息 并 
记录 下 各 个 网 页 的 Internet 地 址 ,并 按 要 求 进行 排列 ,存放 在 可 供 查询 的 大 型 数据 库 中 。 
这 样 , 用 户 可 以 通过 访问 搜索 引擎 网 络 站 点 对 所 需 信息 进 行 查询 。 查 询 结 果 是 一 系列 指 
向 包含 用 户 所 需 信息 的 网 页 的 网 络 地 址 ,通过 单 击 超 链接 ,就 可 以 查看 需要 的 信息 。 

著名 的 搜索 引擎 有 http://www. google. com (谷歌 )、http://www. baidu. com( 百 
度 ) 、https://cn. bing. com( 微 软 必 应 ) 、http://www. sohu. com( 搜 狐 ) 等 。 图 1-5 所 示 的 
是 使 用 搜狐 搜索 引擎 查询 “网 页 制作 ”的 页 面 ,在 搜狐 首页 文本 框 中 输入 要 查找 的 内 容 “ 网 
页 制作 ”, 单 击 Q 按钮 ,得 到 如 图 1-6 所 示 的 搜索 结果 页 面 。 
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图 1-5 使 用 搜狐 搜索 引擎 
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图 1-6 搜索 结果 页 面 











12 Web 标 准 


大 多 数 网 页 设计 人 员 都 有 这 样 的 体验 ,每 次 主流 浏览 器 版 本 的 升级 ,都 会 使 用 户 建立 
的 网 站 变 得 过 时 ,此 时 就 需要 升级 或 者 重新 建 网 站 。 同 样 , 当 新 的 网 络 技术 或 交互 设备 出 
现时 ,设计 人 员 也 需要 制作 一 个 新 版 本 来 支持 这 种 新 技术 或 新 设备 。 

解决 这 些 问题 的 方法 就 是 建立 一 种 普遍 认同 的 标准 。 在 W3C(W3C. org) 的 组 织 下 ， 
Web 标准 开始 被 建立 (以 2000 年 10 月 6 日 发 布 XML 1.0 为 标志 ), 并 在 网 站 标准 组 织 
(WebStandards. org) 的 督促 下 推广 执行 。 


1.2.1 什么 是 Web 标准 


Web 标准 不 是 某 一 种 标准 ,而 是 一 系列 标准 的 集合 。 网 页 主要 由 3 部 分 组 成 : 结构 
(Structure) \ 表 现 (Presentation) 和 行为 (Behavior)。 对 应 的 标准 也 分 为 3 类 : 结构 化 标 
准 语言 主要 包括 XHTML 和 XML ,表现 标准 语言 主要 为 CSS, 行 为 标准 主要 包括 对 象 模 
型 W3C DOM、ECMAScript 等 。 这 些 标准 大 部 分 由 W3C 起 草 和 发 布 ,也 有 一 些 是 其 他 
标准 组 织 制定 的 标准 ,如 ECMA (European Computer Manufacturers Association) 的 
ECMAScript 标准 。 


1. 结构 化 标准 语言 


(1) HTML。HTML 是 来 源 于 标准 通用 置 标语 言 (SGML) , 它 是 Internet 上 用 于 编 
写 网 页 的 主要 语言 。 
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(2) XML。XML 是 the eXtensible Markup Language( 可 扩展 置 标语 言 ) 的 缩写 , 目 
前 推荐 遵循 的 标准 是 W3C 于 2000 年 10 月 6 日 发 布 的 XML 1.0。 与 HTML 一 样 ,XML 
同样 来 源 于 SGML, 但 XML 是 一 种 能 定义 其 他 语言 的 语言 。XML 最 初 设计 的 目的 是 弥 
补 HTML 的 不 足 , 以 强大 的 扩展 性 满足 网 络 信息 发 布 的 需要 ,后 来 逐渐 被 用 于 网 络 数据 
的 转换 和 描述 。 

(3) XHTML。XHTML 是 the eXtensible HyperText Markup Language( 可 扩展 超 
文本 置 标语 言 ) 的 缩写 ,目前 推荐 遵循 的 标准 是 W3C 于 2000 年 10 月 6 日 发 布 的 XML 1.0。 
XML 虽然 数据 转换 能 力 强 大 ,完全 可 以 替代 HTML, 但 面 对 成 千 上 万 的 已 有 站 点 ,直接 
采用 XML 还 为 时 过 早 。 因 此 ,在 HTML 4.0 的 基础 上 ,用 XML 的 规则 对 其 进行 扩展 ， 
得 到 了 XHTML 。 


2. 表现 标准 语言 
CSS 是 Cascading Style Sheets( 层 释 样 式 表 ) 的 缩写 。W3C 创建 CSS 标准 的 目的 是 


以 CSS 取代 HTML 表格 式 布 局 . 帧 和 其 他 表现 的 语言 。 纯 CSS 布局 与 结构 式 HTML 
相 结 合 能 帮助 设计 师 分 离 外 观 与 结构 ,使 站 点 的 访问 及 维护 更 加 容易 。 

3. 行为 标准 

(1) DOM。DOM 是 Document Object Model( 文 档 对 象 模 型 ) 的 缩写 。 根 据 W3C 
DOM 规范 ,DOM 是 一 种 与 浏览 器 .平台 和 语言 相关 的 接口 ,通过 DOM 用 户 可 以 访问 页 
面 其 他 的 标准 组 件 。 简 单 理解 ,DOM 解决 了 Netscape 的 JavaScript 和 Microsoft 的 
JScript 之 间 的 冲突 ,给 予 Web 设计 师 和 开发 者 一 个 标准 的 方法 ,解决 站 点 中 的 数据 、 脚 
本 和 表现 层 对 象 的 访问 问题 。 

(2) ECMAScript。ECMAScript 是 ECMA (European Computer Manufacturers 
Association) 制 定 的 标准 脚本 语言 (JavaScript) 。 目 前 ,推荐 遵循 的 标准 是 ECMAScript 262 。 


1.2.2 建立 Web 标准 的 优点 


对 于 网 站 设计 和 开发 人 员 来 说 ,遵循 网 站 标准 就 是 建立 和 使 用 Web 标准 。 建 立 
Web 标准 的 优点 如 下 。 

(1) 提供 最 大 利益 给 最 多 的 网 站 用 户 。 

(2) 确保 任何 网 站 文档 都 能 够 长 期 有 效 。 

(3) 简化 代码 ,降低 建设 成 本 。 

(4) 让 网 站 更 容易 使 用 ,能 适应 更 多 不 同 用 户 和 更 多 网 络 设 备 。 

(5) 当 浏 览 器 版 本 更 新 或 者 出 现 新 的 网 络 交互 设备 时 ,确保 所 有 应 用 能 够 继续 正确 
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1.2.3 ”理解 表现 和 结构 相 分 离 

了 解 了 Web 标准 之 后 ,本 小 节 将 介绍 如 何 理解 表现 和 结构 相 分 离 。 在 此 以 一 个 实例 
来 详细 说 明 。 首 先 必须 先 明白 一 些 基本 的 概念 : 即 内容 .结构 .表现 和 行为 。 

1. 内 容 


内 容 就 是 页 面 实 际 要 传达 的 真正 信息 ,包含 数据 、 文 档 或 图 片 等 。 注 意 这 里 强调 的 
“真正 ”, 是 指 纯 粹 的 数据 信息 本 身 , 不 包含 任何 辅助 信息 。 图 1-7 所 示 是 文章 分 类 的 
内 容 。 


文章 分 类 ”新 闻 中 心 。 装修 学 堂 。 “网购 天 地 。” 美 家 社 
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图 1-7 文章 分 类 的 内 容 


2. 结构 


可 以 看 到 上 面 的 文本 信息 本 身 已 经 完整 ,但 是 混乱 一 团 ,难以 阅读 和 理解 ,必须 将 其 
格式 化 一 下 ,把 其 分 成 标题 .段落 和 列表 等 ( 见 图 1-8)。 


3. 表现 


虽然 定义 了 结构 ,但 是 内 容 还 是 原来 的 样式 ,例如 标题 字体 没有 变 大 ,正文 的 背景 没 
有 变化 ,列表 没有 修饰 符号 等 。 所 有 这 些 用 来 改变 内 容 外 观 的 东西 , 称 为 “表现 ”对 上 面 
文本 用 “表现 ”处 理 过 后 的 效果 如 图 1-9 所 示 。 
i 文章 分 类 


* 新 闻 中 心 


+ 装修 学 党 
* 网 购 天 地 
+ 美 家 社区 








图 1-8 文章 分 类 的 结构 图 1-9 文章 分 类 的 表现 


4. 行为 

行为 是 对 内 容 的 交互 及 操作 效果 。 例 如 ,使 用 JavaScript 可 以 使 内 容 动 起 来 ,可 以 判 
断 一 些 表单 提交 ,进行 相应 的 操作 。 

所 有 HTML 页 面 都 由 结构 、 表 现 和 行为 3 个 方面 内 容 组 成 。 内 容 是 基础 层 , 然 后 是 
附加 上 的 结构 层 和 表现 层 ,最 后 再 对 这 3 个 层 做 点 “行为 ”。 
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13 HIM 简介 


HTML 是 构成 Web 页 面 (page) .表示 Web 页 面 的 符号 标签 语言 。 通 过 HTML ,将 
所 需 表 达 的 信息 按 某 种 规则 写成 HTML 文件 ,再 通过 专用 的 浏览 器 来 识别 ,并 将 这 些 
HTML 文件 翻译 成 可 以 识别 的 信息 ,这 就 是 所 见 到 的 网 页 。 


1.3.1 Web 技术 发 展 历 程 


HTML 最 早 源 于 标准 通用 化 标记 语言 (Standard General Markup Language, SGML)， 
它 由 Web 的 发 明 者 Tim Berners-Lee 和 其 同事 Daniel W. Connolly 于 1990 年 创立 。 在 
互联 网 发 展 的 初期 ,互联 网 由 于 没有 一 种 网 页 技术 呈现 的 标准 ,所 以 多 家 软件 公司 就 
合力 打造 了 HTML 标准 ,其 中 最 著名 的 就 是 HTML 4, 这 是 一 个 具有 跨 时 代 意 义 的 标 
准 。 尽 管 如 此 ,HTML 4 依然 有 缺陷 和 不 足 , 人 们 仍 在 不 断 地 改进 ,使 它 更 具 可 控制 性 
和 弹性 ,以 适应 网 络 上 的 应 用 需求 。2000 年 , W3C 组 织 公 布 发 行 了 XHTML 1.0 
版 本 。 

XHTML 1.0 是 一 种 在 HTML 4 基础 上 优化 和 改进 的 新 语言 ,目的 是 基于 XML 应 
用 , 它 的 可 扩展 性 和 灵活 性 将 适应 未 来 网 络 应 用 更 多 的 需求 。 但 是 XHTML 并 没有 成 
功 , 大 多 数 的 浏览 器 厂商 认为 XHTML 作为 一 个 过 渡 化 的 标准 并 没有 太 大 必要 ,所 以 
XHTML 并 没有 成 为 主流 ,而 HTML 5 因此 孕育 而 生 。 

HTML 5 的 前 身 名 为 Web Applications 1.0,2004 年 由 WHATWG 提出 ,于 2007 年 
被 W3C 接纳 。W3C 随即 成 立 了 新 的 HTML 工作 团队 ,团队 包括 AOL、Apple、Google、 
IBM、Microsoft、Mozilla、Nokia、Opera 以 及 数 百 个 





















其 他 的 开发 商 。 这 个 团队 于 2009 年 公布 了 第 一 份 | oa 
HTML 5 正式 草案 , HTML 5 将 成 为 HTML 和 1994 ma 
HTMLDOM 的 新 标准 。2012 年 12 月 17 日 , W3C | 199 号 
宣布 凝结 了 大 量 网 络 工作 者 心血 的 HTML 5 规范 8 SEE 
正式 定稿 ,确定 了 HTML 5 在 Web 网 络 平台 奠基 石 2002 tbe web Dose 
的 地 位 。 2005 
Web 技术 发 展 历程 时 间 表 如 图 1-10 所 示 。 图 1-10 ”Web 技术 发 展 历程 时 间 表 


1.3.2 HTML 5 的 特性 


HTML 4 主要 用 于 在 浏览 器 中 呈现 富 文 本 内 容 和 实现 超 链 接 。HTML 5 继承 了 这 
些 特 点 ,但 更 侧重 于 在 浏览 器 中 实现 Web 应 用 程序 。 对 于 网 页 的 制作 ,HTML 5 主要 有 
两 方面 的 改动 , 即 实现 Web 应 用 程序 和 用 于 更 好 地 呈现 内 容 。 
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1. 实现 Web 应 用 程序 


HTML 5 引入 新 的 功能 ,以 帮助 Web 应 用 程序 的 创建 者 更 好 地 在 浏览 器 中 创建 富 
媒体 应 用 程序 ,这 是 当前 Web 应 用 的 热点 。 多 媒体 应 用 程序 目前 主要 由 Ajax 和 Flash 
来 实现 ,HTML 5 的 出 现 增 强 了 这 种 应 用 。HTML 5 用 于 实现 Web 应 用 程序 的 功能 
如 下 。 

(1) 绘画 的 Canvas 元 素 ,该 元 素 就 像 在 浏览 器 中 其 入 一 块 画布 ,程序 可 以 在 画布 上 
绘画 。 

(2) 更 好 的 用 户 交 互 操 作 , 包 括 拖 放 、 内 容 可 编辑 等 。 

(3) 扩展 的 HTML DOM API。 

(4) 本 地 离线 存储 。 

(5) Web SQL 数据 库 。 

(6) 离线 网 络 应 用 程序 。 

(7) 跨 文档 消息 。 

(8) Web Workers 优化 JavaScript 执行 。 


2. 更 好 地 呈现 内 容 


基于 Web 表现 的 需要 ,HTML 5 引入 了 更 好 地 呈现 内 容 的 元 素 , 主 要 有 以 下 三 项 。 
(1) 用 于 视频 .音频 播放 的 video 元 素 和 audio 元 素 。 

(2) 用 于 文档 结构 的 article footer header .nav .section 等 元 素 。 

(3) 功能 强大 的 表单 控件 。 








1.3.3 HTML 5 元素 


根据 内 容 类 型 的 不 同 ,可 以 将 HTML 5 的 标签 元 素 分 为 7 类 , 见 表 1-1。 
表 1-1 HTML 5 的 内 容 类 型 























内 容 类 型 描 述 

内 艇 向 文档 中 添加 其 他 类 型 的 内 容 ,例如 audio video .canvas 和 iframe 等 

流 在 文档 和 应 用 的 body 中 使 用 的 元 素 ,例如 form、hl 和 small 等 

标题 段落 标题 ,例如 hl、h2 和 hgroup 等 

交互 与 用 户 交互 的 内 容 , 例 如 音频 和 视频 的 控件 .button 和 textarea 等 

— 通常 出 现在 页 面 的 head 中 .设置 页 面 其 他 部 分 的 表现 和 行为 ,例如 script、style 和 
于 所 | Ge 等 

短语 文本 和 文本 标签 元 素 , 例 如 mark、kbd、sub 和 sup 等 

片段 用 于 定义 页 面 片段 的 元 素 , 例 如 article、aside 和 title 等 





其 中 的 一 些 元 素 如 canvas、audio 和 video, 在 使 用 时 往往 需要 其 他 API 来 配合 ,以 实 
现 细 粒度 控制 ,但 它们 同样 可 以 直接 使 用 。 
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14 HIM_ 5 的 基本 结构 


每 个 网 页 都 有 其 基本 的 结构 ,包括 HTML 的 语法 结构 、 编 写 规范 、 文 档 结构 以 及 标 
签 的 格式 等 。 


1.4.1 HTML 5 语法 结构 


1. 标签 

HTML 文档 由 标签 和 被 标签 的 内 容 组 成 。 标 签 能 产生 所 需要 的 各 种 效果 ,其 功能 类 
似 于 一 个 排版 软件 ,将 网 页 的 内 容 排 成 理想 的 效果 。 标 签 (tag) 是 用 一 对 尖 括 号 “二 ”和 
“二 ” 括 起 来 的 单词 或 单词 缩写 ,各 种 标签 的 效果 差别 很 大 ,但 总 的 表示 形式 却 大 同 小 异 ， 
大 多 数 都 成 对 出 现 。 在 HTML 中 ,通常 标签 都 是 由 开始 标签 和 结束 标签 组 成 的 ,开始 标 
签 用 “二 标签 二 "表示 ,结束 标签 用 “二 /标签 二 ”表示 。 其 格式 为 : 

< 标签 > 受 标签 影响 的 内 容 < /标签 > 

例如 ,一 级 标题 标签 二 hl 二 表示 为 : 

<hl> 学 习 网 页 制作 < /hl> 

需要 注意 以 下 两 点 。 

(1) 每 个 标签 都 要 用 "一 ”( 小 于 号 ) 和 "之 ”( 大 于 号 ) 括 起 来 ,如 二 p 二 一 table 之 ,以 表 
示 这 是 HTML 代码 而 非 普 通 文本 。 注 意志 思 盖 "与 标签 名 之 间 不 能 留 有 空格 或 其 他 
字符 。 

(2) 在 标签 名 前 加 上 符号 “/" 是 其 结束 标签 ,表示 该 标签 内 容 的 结束 ,如 二 /hl 二 。 标 
签 也 有 不 用 二 /标签 二 结尾 的 , 称 为 单 标签 。 例 如 ,换行 标签 二 br/。 

2. 属性 

标签 仅仅 规定 这 是 什么 信息 ,但 是 要 想 显示 或 控制 这 些 信 息 ,就 需要 在 标签 后 面 加 上 
相关 的 属性 。 标 签 通过 属性 来 制作 出 各 种 效果 ,通常 都 是 以 “属性 名 二" 值 "” 的 形式 来 表 
示 , 用 空格 隔 开 后 ,还 可 以 指定 多 个 属性 ,并 且 在 指定 多 个 属性 时 不 用 区 分 顺序 。 其 格 
式 为 ; 

< 标签 ”属性 ]=" 属 性 值 I” 属性 所 "局 性 值 2" .> 受 标签 影响 的 内 容 < /标签 > 

例如 ,一 级 标题 标签 二 hl 二 > 有 属性 align,align 表示 文字 的 对 齐 方式 ,表示 为 : 

<hl align= "left"> 学 习 网 页 制作 < /hi> 

3. 元 素 


元 素 是 指 包 含 标 签 在 内 的 整体 ,元 素 的 内 容 是 开始 标签 与 结束 标签 之 间 的 内 容 。 没 
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有 内 容 的 HTML 元 素 被 称 为 空 元 素 , 空 元 素 是 在 开始 标签 中 关闭 的 。 例 如 ,以 下 代码 片 
段 所 示 。 


<hl> 学 习 网 页 制作 < /hl> < 上 -该 锯 元 素 为 有 内 容 的 元 素 --> 
<br/> < 上 -该 pr 元 素 为 空 元 素 , 在 开始 标签 中 关闭 --> 


1.4.2 HTML 5 编写 规范 


页 面 的 HTML 代码 书写 必须 符合 HTML 规范 ,这 是 用 户 编写 拥有 良好 结构 文档 的 
基础 ,这 些 文档 可 以 很 好 地 工作 于 所 有 的 浏览 器 ,并 且 可 以 向 后 兼容 。 


1. 标签 的 规范 


(1) 标签 分 单 标签 和 双 标 签 , 双 标签 往往 是 成 对 出 现 , 所 有 标签 (包括 空 标签 ) 都 必须 
关闭 ,如 二 br/>、<img/>、 二 p>...</p 二 等 。 

(2) 标签 名 和 属性 建议 都 用 小 写字 母 。 

(3) 多 数 HTML 标签 可 以 肉 套 ,但 不 允许 交叉 。 

(4) HTML 文件 一 行 可 以 写 多 个 标签 ,但 标签 中 的 一 个 单词 不 能 分 两 行 写 。 


2. 属性 的 规范 


(1) 根据 需要 可 以 使 用 该 标签 的 所 有 属性 ,也 可 以 只 用 其 中 的 几 个 属性 。 在 使 用 时 ， 
属性 之 间 没 有 顺序 。 

(2) 属性 值 都 要 用 双 引 号 括 起 来 。 

(3) 并 不 是 所 有 的 标签 都 有 属性 ,如 换行 标签 就 没有 。 

3. 元 素 的 舱 套 


(1) 块 级 元 素 可 以 包含 行 级 元 素 或 其 他 块 级 元 素 ,但 行 级 元 素 却 不 能 包含 块 级 元 素 ， 
它 只 能 包含 其 他 的 行 级 元 素 。 

(2) 有 几 个 特殊 的 块 级 元 素 只 能 包含 行 级 元 素 ,不 能 再 包含 块 级 元 素 , 这 几 个 特殊 的 
标签 是 <hl>、<h2>、<h3>、<h4、<h5>>、<h6>>、<p>、<dt>。 


4. 代码 的 缩 进 

HTML 代码 并 不 要 求 在 书写 时 缩 进 ,但 为 了 文档 的 构 性 和 层次 性 ,建议 初学 者 使 用 
标记 时 首尾 对 齐 ,内 部 的 内 容 向 右 缩 进 几 格 。 
1.4.3 HTML 5 文档 结构 


HTML 5 文档 是 一 种 纯 文本 格式 的 文件 ,文档 的 基本 结构 如 下 : 


< ldoctype html> 
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<html> 
<head> 
<meta charset= "gb2312"> 
<title> 文 档 标题 < /title> 
< /head> 
<body> 
网 页 内 容 
< /body> 
</htm> 


1. 文档 类 型 


在 编写 HTML 5 文档 时 ,要 求 指定 文档 类 型 ,用 于 向 浏览 器 说 明 当 前 文档 使 用 的 是 
哪 种 HTML 标准 。 文 档 类 型 声明 的 格式 如 下 : 

< !dbctype html> 

这 行 代 码 称 为 doctype 声明 ,doctype 是 document type( 文 档 类 型 ) 的 简写 。 要 建立 
符合 标准 的 网 页 ,doctype 声明 是 必 不 可 少 的 关键 组 成 部 分 。doctype 声明 必须 放 在 每 一 
个 HTML 文档 的 最 项 部 ,在 所 有 代码 和 标签 之 前 。 

2. HTML 文档 标签 <html 之 ...</html 之 

HTML 文档 标签 的 格式 如 下 : 

<html> HIML 文 档 的 内 容 < /html> 


三 html 二 处 于 文档 的 最 前 面 ,表示 HTML 文档 的 开始 , 即 浏览 器 从 二 html 二 开始 解 
释 ,直到 遇 到 二 /html 二 为 止 。 每 个 HTML 文档 均 以 二 html 二 开始 ,以 二 /html 二 结束 。 














3. HTML 文档 头 标 签 过 head 过...</head 之 

HTML 文档 包括 头 部 (head) 和 主体 (body)。HTML 文档 头 标签 的 格式 如 下 : 

<head> 头 部 的 内 容 < /head> 

文档 头 部 内 容 在 开始 标签 二 html 二 和 结束 标签 二 /html 二 之 间 定 义 ,其 内 容 可 以 是 标 
题名 或 文本 文件 地 址 、 创 作 信息 等 网 页 信息 说 明 。 

4. HTML 文档 编码 

HTML 5 文档 直接 使 用 meta 元 素 的 charset 属性 指定 文档 编码 ,格式 如 下 : 

<meta charset= "db2312"> 


为 了 被 浏览 器 正确 解释 和 通过 W3C 代码 校 验 ,所 有 的 HTML 文档 都 必须 声明 它们 

所 使 用 的 编码 语言 。 文 档 声明 的 编码 应 该 与 实际 的 编码 一 致 ,否则 就 会 呈现 为 乱码 。 对 
于 中 文 网 页 的 设计 者 来 说 ,用 户 一 般 使 用 gb2312( 简 体 中 文 ) 。 
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5. HTML 文档 主体 标签 过 body 之 ..….</body 二 
HTML 文档 主体 标签 的 格式 如 下 : 


<body> 

网 页 的 内 容 
< /body> 
主体 位 于 头 部 之 后 ,以 二 body> 为 开始 标签 ,二 /body> 为 结束 标签 。 它 定义 网 页 上 
显示 的 主要 内 容 与 显示 格式 ,是 整个 网 页 的 核心 ,网 页 中 要 真正 显示 的 内 容 都 包含 在 主 
体 中 。 





15 网 页 文件 的 创建 过 程 


任意 文本 编辑 器 都 可 以 用 于 编写 网 页 源 代码 ,最 常见 的 文本 编辑 器 就 是 Windows 自 
带 的 记事 本 。 本 书 中 所 有 的 网 页 源 代 码 均 采用 在 记事 本 中 手工 输入 ,有 助 于 设计 人 员 对 
网 页 结构 和 样式 有 更 深入 的 了 解 。 

一 个 简单 的 网 页 可 以 只 有 几 个 文字 ,也 可 以 复杂 得 像 一 张 或 几 张 海报 。 下 面 创建 一 

















个 只 有 文本 组 成 的 简单 页 面 ,通过 它 来 学 习 网 。 一 一 一 一 
i- rst - 记事 本 FE 区 本 
页 的 编辑 \ 保 存 过 程 。 下 面 用 最 简单 的 “记事 | 文 #tp_ 编 三 B_ 格 zt(O) 坦 看 “帮助 (H) 
本 ”来 编辑 网 页 文件 。 ti > 
和‘ 本 p66 ead> ar 入 

(1) 打开 记事 本 。 单 击 Windows 中 的 “ 开 et Rs 
始 ” 按 钮 ,在 “程序 ”菜单 的 “附件 ” 子 菜 单 中 选择 | tsad 
“记事 本 ”命令 。 nset 

(2) 创建 新 文件 ,并 按 HTML 语言 规则 编 上” 
辑 。 在 “记事 本 ”窗口 中 输入 HTML 代码 ,具体 第 11 行 ， 
的 内 容 如 图 1-11 所 示 。 图 1-11 输入 HTML 代码 


(3) 保存 网 页 。 打 开 “ 记 事 本 ”的 “文件 " 菜 
单 ,选择 “保存 ”命令 。 此 时 将 出 现 另 存 为 "对话 框 ,在 “保存 在 ”下 拉 列 表 框 中 选择 文件 要 
存放 的 路 径 ; 在 “文件 名 ”文本 框 中 输入 以 . html 为 后 缀 的 文件 名 ,如 first. html; 在 “保存 
类 型 "下 拉 列 表 框 中 选择 “文本 文档 (x. txt)” 选 项 ,如 图 1-12 所 示 。 最 后 单 击 “ 保 存 ” 按 
钮 ,将 记事 本 中 的 内 容 保存 在 磁盘 中 。 

(4) 在 “我 的 电脑 ”相应 的 存盘 文件 夹 中 双击 first. html 文件 启动 浏览 器 , 即 可 看 到 
网 页 的 显示 结果 。 

如 果 希 望 将 该 网 页 作为 网 站 的 首页 (主页 ) , 即 当 浏览 者 输入 网 址 后 ,就 显示 该 网 页 的 
内 容 , 可 以 把 这 个 文件 设 为 默认 文档 ,文件 名 为 index. html 或 index. htm。 
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图 1-12 “记事 本 ”的 “另存 为 ”对话 框 


16 搭建 支持 HIM 5 的 浏览 器 环境 


尽管 各 主流 厂商 的 最 新 版 浏览 器 都 对 HTML 5 提供 了 很 好 的 支持 ,但 HTML 5 是 
一 种 全 新 的 HTML 标签 语言 ,许多 功能 必须 在 搭建 好 相应 的 浏览 环境 后 才 可 以 正常 浏 
览 。 因 此 ,在 正式 执行 一 个 HTML 5 页 面 之 前 ,必须 先 搭建 支持 HTML 5 的 浏览 器 环 
境 , 并 检查 浏览 器 是 否 支持 HTML 5 标签 。 

目前 ,Microsoft 的 IE 系列 浏览 器 仅 有 IE 9 及 其 以 上 版 本 支持 HTML 5, 本 书 所 有 
的 应 用 实例 均 是 在 Windows 7 操作 系统 下 的 IE 9 浏览 器 中 运行 的 。 

【 例 1-1】 制作 简单 的 HTML 5 文档 检测 浏览 器 是 否 支 持 HTML 5, 本 例文 件 1-1. html 
在 IE9 浏 览 器 中 的 显示 效果 如 图 1-13 所 示 。 

代码 如 下 : 


< !doctype html> 
<htm> 
< head> 
<meta harset= "gb2312"> 
<title> 检 查 浏览 器 是 否 支 持 HML 5< /title> 


< /head> 

<body> 
< canvas id "my" width= "200" height= "100" style= "border: 3px solid # £00; 
background- color: #00f"™> <!--HIML 5 的 canvas 画布 标签 --> 
该 浏览 器 不 支持 HML 5 


配 
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图 1-13 例 1-1 的 页 面 显示 效果 


【说 明 】 在 HTML 页 面 中 插入 一 段 HTML 5 的 canvas 画布 标签 , 当 浏览 器 支持 该 
标签 时 ,将 显示 一 个 矩形 ;反之 , 则 在 页 面 中 显示 ”* 该 浏览 器 不 支持 HTML 5” 的 提示 。 


习 题 


. WWW 浏览 常用 的 浏览 器 是 什么 浏览 器 ? URL 的 含义 和 功能 是 什么 ? 
. 简 述 超 文本 和 超 文 本 标记 语言 的 特点 。 

. 举例 说 明 常 用 的 搜索 引擎 及 使 用 搜索 引擎 查找 信息 的 方法 。 

什么 是 Web 标准 ? 举例 说 明 网 页 的 表现 和 结构 相 分 离 的 含义 。 

简 述 HTML 5 文档 的 基本 结构 及 语法 规范 。 

. 使 用 记事 本 创建 一 个 包含 网 页 基本 结构 的 页 面 。 

. 制作 简单 的 HTML 5 文档 ,检测 浏览 器 是 否 支持 HTML 5。 
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网 页 内 容 的 表现 形式 多 种 多 样 ,包括 文本 、 超 链接 、 列 表 和 图 像 元 素 等 ,本 章 将 重点 介 
绍 如 何在 页 面 中 添加 与 编辑 这 些 网 页 元 素 ,以 实现 HTML 5 页 面 的 基本 排版 。 
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在 网 页 的 头 部 中 ,通常 存放 一 些 介绍 页 面 内 容 的 信息 ,例如 ,页 面 标题 描 述 、 关 键 词 、 
链接 的 CSS 样式 文件 和 客户 端的 JavaScript 脚本 文件 等 。 

其 中 ,页 面 标题 及 页 面 描述 称 为 页 面 的 摘要 信息 。 摘 要 信息 的 生成 在 不 同 的 搜索 引 
擎 中 会 存在 比较 大 的 差别 ,即使 是 同一 个 搜索 引擎 也 会 由 于 页 面 的 实际 情况 而 有 所 不 同 。 
一 般 情况 下 ,搜索 引擎 会 提取 页 面 标题 标签 中 的 内 容 作为 摘要 信息 的 标题 ,而 描述 则 常 来 
自 页 面 描述 标签 的 内 容 或 直接 从 页 面 正文 中 截取 。 如 果 希 望 自己 发 布 的 网 页 能 被 百度 、 
谷歌 等 搜索 引擎 搜索 ,那么 在 制作 网 页 时 就 需要 注意 编写 网 页 的 摘要 信息 。 


2.1.1 过 title 之 标签 


二 title 志 标签 是 页 面 标题 标签 . 它 将 HTML 文件 的 标题 显示 在 浏览 器 的 标题 栏 中 ， 
用 于 说 明文 件 的 用 途 , 这 个 标签 只 能 应 用 于 二 head 二 与 二 /head 二 之 间 。 过 title 二 标签 是 
对 文件 内 容 的 概括 ,一 个 好 的 标题 能 使 读者 从 中 判断 出 该 文件 的 大 概 内 容 。 

网 页 的 标题 不 会 显示 在 文本 窗口 中 ,而 是 以 窗口 的 名 称 显示 出 来 ,每 个 文档 只 允许 有 
一 个 标题 。 网 页 的 标题 能 给 浏览 者 带 来 方便 ,如 果 浏 览 者 喜欢 该 网 页 ,将 它 加 入 书签 中 或 
保存 到 磁盘 上 ,标题 就 作为 该 页 面 的 标志 或 文件 名 。 另 外 ,使 用 搜索 引擎 时 显示 的 结果 也 
是 页 面 的 标题 。 

过 title 志 标签 位 于 二 head 记 与 二 /head 放 中 ,用 于 标示 文档 标题 。 格 式 如 下 : 


<title> 标 题名 < /title> 
例如 ,搜狐 网 站 的 主页 ,对 应 的 网 页 标题 如 下 : 
<title> 搜 狐 < /title> 


打开 网 页 后 .将 在 浏览 器 窗口 的 标题 栏 显示 “搜狐 ”网 页 标题 。 在 网 页 文档 头 部 定义 
的 标题 内 容 不 在 浏览 器 窗口 中 显示 ,而 是 在 浏览 器 的 标题 栏 中 显示 。 尽 管 文档 头 部 定义 
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的 信息 很 多 ,但 能 在 浏览 器 标题 栏 中 显示 的 信息 只 有 标题 内 容 。 





2.1.2 二 meta 之 标签 


所 meta 之 标签 是 元 信息 标签 ,在 HTML 中 是 一 个 单 标签 。 该 标签 可 重复 出 现在 头 
部 标签 中 ,用 来 指明 本 页 的 作者 .制作 工具 和 所 包含 的 关键 字 , 以 及 其 他 一 些 描述 网 页 的 
信息 。 

一 meta 二 标签 分 两 大 属性 : HTTP 标题 属性 (http-equiv) 和 页 面 描述 属性 (name)。 
不 同 的 属性 又 有 不 同 的 参数 值 , 这 些 不 同 的 参数 值 就 实现 了 不 同 的 网 页 功能 。 本 小 节 主 
要 讲解 name 属性 ,用 于 设置 搜索 关键 字 和 描述 。 二 meta 二 标签 的 name 属性 的 语法 格式 
如 下 : 


<meta name= "参数 " content=" 参 数值 " /> 


name 属性 主要 用 于 描述 网 页 摘要 信息 ,与 之 对 应 的 属性 值 为 content,content 中 的 
内 容 主 要 是 为 了 便于 搜索 引擎 查找 信息 和 分 类 信息 。 
name 属性 主要 有 以 下 两 个 参数 : keywords 和 description 。 
(1) keywords( 关 键 字 )。keywords 用 来 告诉 搜索 引擎 网 页 使 用 的 关键 字 。 例 如 , 国 
内 著名 的 搜狐 网 ,其 主页 的 关键 字 设置 如 下 : 
<meta name= "keywords" content= "搜狐 ,门户 网 站 ,新 媒体 ,网 络 媒体 ,新 闻 , 财 经 ,体育 , 娱 
乐 ,时 尚 , 汽 车 ,房产 ,科技 ,图 片 ,论坛 , 微 博 ,博客 ,视频 ,电影 ,电视 剧 "/> 
(2) description( 网 站 内 容 描述 )。description 用 来 告诉 搜索 引擎 网 站 主要 的 内 容 。 
例如 ,搜狐 网 站 主页 的 内 容 描述 设置 如 下 : 
<meta name= "Description" content= 趾 狐 网 为 用 户 提供 24 小 时 不 间断 的 最 新 资讯 ,及 搜 
索 、 邮 件 等 网 络 服 务 。 内 容 包 括 全 球 热点 事件 、 突 发 新 闻 、 时 事 评论 . 热 播 影视 剧 、 体 育 赛事 , 行 
业 动 态 、 生 活 服 务 信息 ,以 及 论坛 .博客 、 微 博 、 我 的 搜狐 等 互动 空间 。" /> 
当 浏 览 者 通过 百度 搜索 引擎 搜索 “搜狐 ”时 ,就 可 以 看 到 搜索 结果 中 显示 出 网 站 主页 
的 标题 ,关键 字 和 内 容 描述 ,如 图 2-1 所 示 。 
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务 。 内 容 包括 全 球 热点 事件 、 突 发 新 闻 、 时 事 评论 、 热 拓 影 视 剧 、 体 
HGOM 亲 闪 事 、 行 业 动态、 生活 服务 信息 ,以 及 

Www sohu comy ~ W3 - 百度 快 昭 - 1737 条 评 从 


加 

















筷 100% ~ 





图 2-1 页 面 摘要 信息 
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2.1.3 二 link 之 标签 


去 link 盖 标签 是 关联 标签 ,用 于 定义 当前 文档 与 Web 集合 中 其 他 文档 的 关系 ,建立 
一 个 树 状 链接 组 织 。 二 link 二 标签 并 不 将 其 他 文档 实际 链接 到 当前 文档 中 ,只 是 提供 链 
接 该 文档 的 一 个 路 径 。<<link 二 标签 最 常用 的 是 用 来 链接 CSS 样式 文件 ,格式 如 下 : 


< link rel= "stylesheet" href= "外 部 样式 表 文 件 名 .css" type= "text/css" /> 


2.1.4 二 script 之 标签 


去 script 盖 标签 是 脚本 标签 ,用 于 为 HTML 文档 定义 客户 端 脚本 信息 。 此 标签 可 在 
文档 中 包含 一 段 客户 端 脚 本 程序 。 此 标签 可 以 位 于 文档 中 任何 位 置 ,但 常 位 于 二 head 二 
标签 内 ,以 便于 维护 。 格 式 如 下 : 


< script type= "text/javascript" sro= "脚本 文件 名 .js"”>< /script> 


【 例 2-1】 制作 宇宙 电子 页 面 摘要 信息 ,由 于 摘要 信息 不 能 显示 在 浏览 器 窗口 中 , 因 
此 这 里 只 给 出 本 例文 件 2-1. html 的 代码 。 
代码 如 下 : 


< !doctype html> 
<html> 
<head> 
<meta harset= "gb2312"> 
<title> 宇 宙 电 子 < /title> 
<meta name= "keywords" content= "宇宙 电子 ,自动 化 生产 ,定制 化 服务 ,品质 保证 " /> 
<meta name= "description" content=" 守 窗 电 子 采用 标准 化 和 定制 化 服务 相 结 合 的 经 ” 营 模 式 ， 
以 高 品质 产品 为 立足 点 ,以 技术 服务 于 市 场 为 导向 ,以 先进 优良 的 自动 化 生产 和 测 ” 试 装备 
为 保障 ,为 客户 提供 持续 的 优良 产品 生产 服务 和 品质 保证 。"/> 
< /head> 
<body> 
< /body> 
< /htm> 


【说 明 】 位 于 头 部 的 摘要 信息 不 会 在 网 页 上 直接 显示 ,而 是 通过 浏览 器 内 部 方式 起 
作用 。 
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在 网 页 制作 过 程 中 ,通过 文本 与 段落 的 基本 排版 即 可 制作 出 简单 的 网 页 。 以 下 讲解 
常用 的 文本 与 段落 排版 所 使 用 的 标签 。 
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2.2.1 标题 文字 标签 


在 页 面 中 ,标题 是 一 段 文字 内 容 的 核心 ,所 以 总 是 用 加 强 的 效果 来 表示 。 网 页 中 的 信 
息 可 以 分 为 主要 点 、 次 要 点 ,可 以 通过 设置 不 同 大 小 的 标题 ,增加 文章 的 条 理性 。 标 题 文 
字 标 签 的 格式 如 下 : 


<h#align= "left|oenter| right"> 标题 文字 < /h#> 


“# ”用 来 指定 标题 文字 的 大 小 ,“#” 取 1~6 的 整数 值 , 取 1 时 文字 最 大 , 取 6 时 文字 
最 小 。 

属性 align 用 来 设置 标题 在 页 面 中 的 对 齐 方式 ,包括 left( 左 对 齐 )、center( 居 中 ) 或 
right( 右 对 齐 ) ,默认 为 left。 

二 h# 记 ... 二 /h# 二 标签 默认 显示 宋体 ,在 一 个 标题 行 中 无 法 使 用 不 同 大 小 的 字体 。 

【 例 2-2】 列 出 HTML 中 的 各 级 标题 ,本 例文 件 2-2. html 在 浏览 器 中 显示 的 效果 如 
图 2-2 所 示 。 








代码 如 下 : a -= 
<head> 个 标量 示 x | 
<title> 标 题 示 例 < /title> “| 
< /head> 
<body> 


<hl> 一 级 标题 < /hl> 
<h2> 二 级 标题 < /hb2> 
<h3> 三 级 标题 < /h3> 





<h4> 四 级 标题 < /h4> 四 级 标题 
<h5> 五 级 标题 < /h5> 五 级 标题 
<h6> 六 级 标题 < /he> i 
< /pody> 
< /htm> 





图 2-2 各 级 标题 


2.2.2 字体 标签 


在 网 页 中 为 了 增强 页 面 的 层次 ,其 中 的 文字 可 以 用 不 同 的 大 小 .字体 、 字 型 .颜色 ,可 
用 二 font 二 标签 设置 。 设 置 文字 的 格式 如 下 : 


< fcnt size= 吐字 " faoe=" 守 体 名 " color= "项 色 咱 被 设置 的 文字 < /fcnt> 


二 font 记 标签 可 设 定 文字 的 字体 、 字 号 和 颜色 。 其 中 : 

size 用 来 设置 文字 的 大 小 。 数 字 的 取 值 范围 从 1~7,size 取 1 时 最 小 , 取 7 时 最 大 。 

face 用 来 设置 字体 。 如 黑体 .宋体 .楷体 _GB2312 .隶书 .Times New Roman 等 。 

color 用 来 设置 文字 颜色 ,默认 为 黑色 。 

文字 颜色 可 以 用 相应 的 英文 名 称 或 以 “#” 引 导 的 一 个 十 六 进 制 代 码 来 表示 , 见 
20 
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表 2-1。 
表 2-1 色彩 代码 
色 彩 色彩 英文 名 称 十 六 进 制 代码 

黑色 black #000000 
蓝 色 blue #0000{f 
棕色 brown 井 a52a2a 
青 cyan #00ffff 
灰色 gray 井 808080 
绿色 green 并 008000 
乳白 色 ivory # {ffff0 
橘 黄色 orange #ffa500 
粉红 色 pink #ffcOcb 
红色 red # ff0000 
白色 white # {fffff 
黄色 yellow # ffff00 
深 红色 crimson 井 cd061f 
黄 绿色 greenyellow #90b6eff 
水 蓝 色 dodgerblue 井 0b6eff 
淡 紫 色 lavender # dbdbf8 








【 例 2-3】〗 使 用 二 font 二 标签 设置 文字 样式 ,本 例文 件 2-3. html 在 浏览 器 中 的 显示 
效果 如 图 2-3 所 示 。 
代码 如 下 : 


<html> 

<head> 
<title> font 标 签 < /title> 

< [head> 

<body> 
<h2 align= "center> 设 置 文字 样式 < /> 
< 户 默 认 文字 样式 < /p> 
<p><font size= "4" color= "blue"> 4 号 蓝 色 文字 < /font>< /p> 
<p><font size= "5" color= "green"> 5 号 绿色 文字 < /font>< /p> 
<p>< font face= "向 软 雅 黑 " size="6" color= "red"> 6 号 红色 微软 雅 黑 文字 < /font> 


2.2.3 特殊 符号 


由 于 大 于 号 “ 盖 ” 和 小 于 号 “到 ”等 已 作为 HTML 的 语法 符号 ,因此 ,如 果 要 在 页 面 中 
显示 这 些 特殊 符号 ,必须 使 用 相应 的 HTML 代码 表示 ,这 些 特殊 符号 对 应 的 HTML 代 
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设置 文字 样式 
默认 文字 样式 


4 号 蓝 色 文字 
5 号 绿色 文字 


号 红色 微软 雅 黑 文字 


县 100% ~ 








图 2-3 二 font 二 标签 示例 


码 被 称 为 字符 实体 。 
常用 的 特殊 符号 及 对 应 的 字符 实体 见 表 2-2。 这 些 字符 实体 都 以 “& ”开头 ,以 * 
结尾 。 


表 2-2 常用 的 特殊 符号 及 对 应 的 字符 实体 





























特殊 符号 字符 实体 示 例 
空格 Bnbsp; 宇宙 电子 . &nbsp; &nbsp; 客 服 电话 :400-820-1111 
大 于 (二 ) Rgt; 30&-gt;20 
小 于 (一 ) R&lt; 20&lt;30 
引号 (7 Rdquot HTML 属性 值 必须 使 用 成 对 的 & quot; 括 起 来 
人 民 币 符号 (于 ) yen; 售 价 :& yen;800 

县 ”| 春 看 玫瑰 树 , 西 邻 即 宋 家 。 门 深重 暗 叶 , 墙 近 度 飞 花 。&&# 

破 折 号 (一 ) 21 8212;《 芳 树 》 
版 权 号 (@) Rcopys; Copyright &copy; 宇宙 电子 
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为 了 使 HTML 页 面 中 的 文本 内 容 更 加 形象 生动 ,需要 使 用 一 些 特殊 的 元 素来 突出 
文本 之 间 的 层次 关系 ,这 样 的 元 素 称 为 层次 语义 元 素 。 文 本 层次 语义 元 素 通常 用 于 描述 
特殊 的 内 容 片段 ,可 使 用 这 些 语义 元 素 标注 出 重要 信息 .例如 ,名 称 、 评 价 、 注 意 事项 日 
期 等 。 


2.3.1 二 time 之 标签 


二 time 志 标签 用 于 定义 公历 的 时 间 (24 小 时 制 ) 或 日 期 ,时 间 和 时 区 偏 移 是 可 选 的 。 
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去 time> 标 签 不 会 在 浏览 器 中 呈现 任何 特殊 效果 ,但 是 能 以 机 器 可 读 的 方式 对 日 期 和 时 
间 进 行 编码 ,例如 ,用 户 能 够 将 生日 提醒 或 排 定 的 事件 添加 到 用 户 日 程 表 中 ,搜索 引擎 也 
能 够 生成 更 智能 的 搜索 结果 。 
<time 之 标签 的 属性 见 表 2-3。 


表 2-3 过 time 之 标签 的 属性 














属 性 描 述 
datetime 规定 日 期 /时 间 ,否则 由 元 素 的 内 容 给 定 日 期 /时 间 
pubdate 指示 二 time 二 标签 中 的 日 期 /时 间 是 文档 (或 二 article 二 > 标签) 的 发 布 日 期 





【 例 2-4】 使 用 <<time 二 标签 设置 日 期 和 时 间 , 本 例文 件 2-4. html 在 浏览 器 中 的 显 
示 效 果 如 图 2-4 所 示 。 




















代码 如 下 : 
<html> 个 time 标 等 的 使 用 X 
ee 我 每 天 早上 6.00 起 床 
<meta charset= "gb2312"> 
<title> time 标 签 的 使 用 < /title> 今年 的 10 月 16 日 是 我 的 生日 
< /head> 本 消息 发 布 于 2017 年 9 月 26 日 
<body> 
<p> 我 每 天 早上 < time> 6: 00< /time> 起 床 < /p> i 
<p> 今 年 的 <time datetime= "2017- 10- 16"> 10 月 16 日 图 2-4 ”二 time 二 标签 示例 
< /time> 是 我 的 生日 < /p> 


< time datetime= "2017- 09- 26" pubdate= "pubdate"> 
本 消息 发 布 于 2017 年 9 月 26 日 
< /time> 
< /pody> 
< /htm> 


2.3.2 二 mark 之 标签 


去 mark 二 标签 用 来 定义 带 有 记号 的 文本 ,其 主要 功能 是 在 文本 中 高 亮 显 示 某 个 或 某 
几 个 字符 ,引起 用 户 的 特别 注意 。 

【 例 2-5】 使 用 二 mark 二 标签 设置 文本 高 亮 显 示 , 本 例文 件 2-5. html 在 浏览 器 中 的 
显示 效果 如 图 2-5 所 示 。 

代码 如 下 : 


< !Goctype hbm> 
<htm> 
<head> 
<meta charset= "gb2312"> 
<title>mark 标 签 示例 < /title> 
< /head> 
<body> 
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<h3> 宇 宙 电 子 的 <mar> 经 营 宗 旨 < /hmarle < /hb3> 


< 户 宇 宙 电 子 采用 <mani> 标 准 化 < /rark> 和 <mari> 定 制 化 < hnarl> 服务 相 结合 的 经 营 模 
式 , 为 客户 提供 持续 的 优良 产品 生产 服务 和 品质 保证 。 


< /pody> 
< /htm> 

















] Di\web\ch2\2-5.html 
合 mark 标 等 示例 x 








字 宙 电子 的 经 营 宗 由 





宇宙 电子 采用 标准 化 和 定制 化 服务 相 结 合 的 经 营 模式 ,为 
客户 提供 持续 的 优良 产品 生产 服务 和 品质 保证 。 








豚 100%6 ~ 


图 2-5 二 mark 记 标签 示例 


2.3.3 二 cite 之 标签 


达 cite 二 标签 可 以 创建 一 个 引用 标记 ,用 于 对 文档 参考 文献 的 引用 说 明 ,一旦 在 文档 
中 使 用 了 该 标记 ,被 标记 的 文档 内 容 将 以 斜体 的 形式 展示 在 页 面 中 ,以 区 别 于 段落 中 的 其 


他 字符 。 


【 例 2-6】 使 用 二 cite 二 标签 设置 文档 引用 说 明 ,本 例文 件 2-6. html 在 浏览 器 中 的 显 


示 效 果 如 图 2-6 所 示 。 
代码 如 下 : 


< !doctype html> 
<html> 
<head> 
<meta charset= "gb2312"> 
<title> cite 标 签 示例 < /title> 
< [head> 
<body> 
<E> 天 下 大 势 , 分 久 必 合 , 合 久 必 分 。</e> 
<cite> 一 一 罗贯中 (三 国 演义 》< /cite> 
< /pody> 
< /htm> 




















Tr 
DAweb\ch2\2-6.ht PD - OX 
局 dite 标 每 示 例 x 











天 下 大 势 ， 分 久 必 合 ， 合 久 必 分 。 
一 一 多 砍 记 (三 局 洲 义 ) 





图 2-6 到 cite 二 标签 示例 


24 文档 结构 元 素 


段落 和 水 平 线 属于 最 基本 的 文档 结构 元 素 。 在 网 页 制作 过 程 中 ,通过 段落 的 排版 即 
可 制作 出 简单 的 网 页 。 以 下 介绍 基本 的 文档 结构 元 素 。 
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2.4.1 段落 标签 


由 于 浏览 器 忽略 用 户 在 HTML 编辑 器 中 输入 的 回 车 符 , 为 了 使 文字 段落 排列 的 整 
齐 ,清晰 ,常用 段落 标签 二 p 记 ... 二 /p 二 实现 这 一 功能 。 段 落 标签 二 p 二 是 HTML 格式 中 
特有 的 段落 元 素 ,在 HTML 格式 中 不 需要 在 意 文章 每 行 的 宽度 ,不 必 担 心 文字 是 不 是 太 
长 而 被 截 掉 , 它 会 根据 窗口 的 宽度 自动 转折 到 下 一 行 。 段 落 标签 的 格式 如 下 : 

<p aligr= "left|oenter|right"> 文 字 < /p> 

其 中 ,属性 align 用 来 设置 段落 文字 在 网 页 上 的 对 齐 方 式 , 可 取 值 包括 left( 左 对 齐 )、 
center( 居 中 ) 和 right( 右 对 齐 ) ,默认 为 left。 格 式 
中 的 “1” 表示 “或 者 ”, 即 多 项 选 其 一 。 

【 例 2-7】 列 出 包含 二 p 二 标签 的 多 种 属性 ,本 

























S| oNweb\cha2-7ht PD- © x | 





例文 件 2-7. html 在 浏览 器 中 的 显示 效果 如 图 2-7 | 宇宙 电子 新 闻 发 布 
所 示 。 编辑 ， 王 小 虎 
| i 宇宙 电子 有 限 公司 获 得 开封 开发 区 百 强 企业 
人 全 各 和 过 洗 称 号 。2017 年 10 月 ， 百 强 企业 于 袁 大 全 
在 开发 区 投资 服务 中 心 举行 。 
<htm> _。 
相 Copyright 9 2017 宇宙 电子 








<title> 段 落 p 标 签 示例 < /title> 咏 100% ~ 

< /head> 

<body> 
<p align= "center"> 宇宙 电子 新 闻 发 布 < /p> 
<p alignr "right"> 编 辑 : 王 小 虎 < /p> 
<p align= "Jeft"> 宇 宙 电 子 有 限 公 司 获得 …… (此 处 省 略 文字 )< /p> 
<p align= "center"> Copyright goopy; 2017 宇宙 电子 < /p> 

< /body> 

< /htm> 


【说 明 】 段落 标签 会 在 段落 前 后 加 上 额外 的 空 行 ,不 同 段落 间 的 间距 等 于 连续 加 了 
两 个 换行 标签 二 br/ 二 ,用 于 区 别 文字 的 不 同 段落 。 


图 2-7 二 p 二 标签 示例 


2.4.2 换行 标签 


网 页 内 容 并 不 都 是 像 段落 那样 .有 时 候 没 有 必要 用 多 个 二 p 二 标签 去 分 割 内 容 。 如 
果 编 辑 网 页 内 容 只 是 为 了 换行 ,而 不 是 从 新 段落 开始 ,可 以 使 用 二 br/ 二 标签 。 

二 br/ 二 标签 将 打 断 HTML 文档 中 正常 段落 的 行 间距 和 换行 。 过 br/ 二 放 在 任意 一 
行 中 都 会 使 该 行 换行 ,如 果 二 br/ 二 放 在 一 行 的 末尾 ,可 以 使 后 面 的 文字 、 图 像 .表格 等 显 
示 于 下 一 行 ,而 又 不 会 在 行 与 行 之 间 留 下 空 行 , 即 强制 文本 换行 。 换 行 标签 的 格式 如 下 ; 

文字 <br /> 


浏览 器 解释 时 ,从 该 处 换行 。 换 行 标签 单独 使 用 ,可 使 页 面 清 晰 、 整 齐 。 
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【 例 2-8】 制作 宇宙 电子 联系 方式 的 页 面 。 本 例文 件 2-8. html 的 显示 效果 如 图 2-8 
所 示 。 














代码 如 下 : 
<htm> 
<head> 
<title>pr 标 签 示 例 < /title> 
< /head> 
jk QQ: 100588023 
企业 微 信号 ，6666699999 
<h2> 联 系 方式 < /hb2> 客服 邮箱 ，1005880238qq. com 
人 客服 电话 ，400-820-1111 
企业 微 信号 : 6666699999< br /> 联系 人 : 王 小 虎 





客服 邮箱 : 1005880238 qq.cam< br /><br /> 
< 上 -两 个 <hr 人 > 标签 相当 于 一 个 段落 标签 - -> 可 
客服 电话 : 400- 820- 1111<br /> 图 2-8 二 br 二 标签 示例 
联系 人 : 王 小 虎 <br 人 > 
< /pody> 
</htm> 


【说 明 】 用 户 可 以 使 用 段落 标签 二 p 二 制作 页 面 中 “客服 邮箱 ”和 “客服 电话 ”之 间 较 
大 的 空隙 ,也 可 以 使 用 两 个 二 br/ 二 标签 实现 这 一 效果 。 





2.4.3 缩 排 标签 


去 blockquote 之 标签 可 定义 一 个 块 引 用 。 所 blockquote 之 与 二 /blockquote 之 之 间 的 
所 有 文本 都 会 从 常规 文本 中 分 离 出 来 ,经 常会 在 左 , 右 两 边 进行 缩 进 ,而 且 有 时 会 使 用 斜 
体 。 也 就 是 说 , 块 引用 拥有 它们 自己 的 空间 。 缩 排 标签 的 格式 如 下 : 


<blockquote> 文 本 < /blockgaote> 


【 例 2-9】 二 blockquote 二 标签 的 基本 用 法 ,本 例文 件 2-9. html 在 浏览 器 中 的 显示 效 
果 如 图 2-9 所 示 。 
代码 如 下 : 


<html> 
< head> 
<title>blockquote 标 签 示 例 < /title> 
< [head> 
<body> 
<p align= "center> 宇 宙 电 子 经 营 宗旨 < /p> 
< blockquote> 
宇宙 电子 采用 标准 化 和 定制 化 服务 相 结合 的 经 营 模式 ,以 高 品质 产品 为 立足 点 ,以 技术 服 
务 于 市 场 为 导向 ,为 客户 提供 持续 的 优良 产品 生产 服务 和 品质 保证 。 


< /blockouote> 
请 注意 ,浏览 器 在 blockquote 标 签 前 后 添加 了 换行 ,并 增加 了 外 边 距 。 
< /pody> 


26 


第 2 章 HL 5 语言 基础 





< /htm> 








全 人 EEC P-Ccx 居 2 
[voneEa5 <] 














宇宙 电子 经 营 宗旨 可 
二 计生 和 格 作 化 和 生机 做 服务 相 结 启 的 算 革 入 并 
| 高 品质 产品 为 立足 点 ， 以 技术 服 证 市 场 为 导向 ， 和 
| 提 信人 家 关 富 生产 入 和 和 名 上 让 


| 请 注意 ， 浏 览 器 在 blockquote 标 签 前 后 添加 了 换行 ， 并 增加 了 外 边 距 。 
中 100% ~ 











图 2-9 二 blockquote 二 标签 示例 


【说 明 】 浏览 器 会 自动 在 blockquote 标签 前 后 添加 换行 ,并 增加 外 边 距 。 
2.4.4 水平线 标签 


水 平 线 可 以 作为 段落 与 段落 之 间 的 分 隔 线 ,使 文档 结构 清晰 ,层次 分 明 。 当 浏览 器 解 
释 到 HTML 文档 中 的 王 hr/ 盖 标签 时 ,会 在 此 处 换行 ,并 加 入 一 条 水 平 线段 。 
水 平 线 标签 的 格式 如 下 : 


<hr align= "left|oenter|right" size= " 横 线 粗细 " wddth= " 横 线 长 度 " color= " 懂 线 色 
彩 " noshade= "noshade" /> 


其 中 ,属性 size 设 定 线条 粗细 ,以 像素 为 单位 ,默认 值 为 2。 

属性 width 设 定 线 段 长 度 ,可 以 是 绝对 值 (以 像素 为 单位 ) 或 相对 值 (相对 于 当前 窗口 
的 百分比 )。 所 谓 绝对 值 , 是 指 线 段 的 长 度 是 固定 的 ,不 随 窗口 尺 寸 的 改变 而 改变 。 所 请 
相对 值 , 是 指 线段 的 长 度 相 对 于 窗口 的 宽度 而 定 ,窗口 的 宽度 改变 时 ,线段 的 长 度 也 随 之 
改变 ,其 默认 值 为 100%, 即 始终 填 满 当 前 窗口 。 

【 例 2-10】 二 hr/ 二 标签 的 基本 用 法 ,本 例文 件 2-10. html 在 浏览 器 中 的 显示 效果 如 
图 2-10 所 示 。 

代码 如 下 : 


<html> 
< head> 
<title> hr 标签 示例 < /title> 
< /head> 
<body> 
< 户 宇 宙 电 子 新 闻 发 布 
<hr color= "blue"/> 
宇宙 电子 有 限 公司 获得 开封 开发 区 百 强 企业 荣誉 称号 。 
</p> 
< /pody> 
< /html> 
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宇宙 电子 新 闻 发 布 
宇宙 电子 有 限 公司 获 得 开封 开发 区 百 强 企业 荣誉 称号 。 








臣 100% ~ 
图 2-10 二 hr/ 二 标签 示例 
【说 明 】 过 hr/ 二 标签 强制 执行 一 个 换行 ,将 导致 段落 的 对 齐 方式 重新 回 到 默认 值 设置 。 
2.4.5 案例 一 一 制作 宇宙 电子 业务 简介 页 面 


经 过 前 面 文档 结构 元 素 的 学 习 , 接 下 来 使 用 基本 的 段落 排版 制作 宇宙 电子 业务 简介 页 面 。 


【 例 2-11】 制作 宇宙 电子 业务 简介 页 面 , 本 例文 件 2-11. html 的 显示 效果 如 图 2-11 
所 示 。 








| DAweb\ch2\2-11.html 














Pp-oxB: 
司 让 疝 电 子 业务 简介 
业务 简介 
字 宙 微 电 子 封装 测试 基地 
宇宙 微 电 子 封装 测试 基地 启动 于 2001 年 ， 是 一 家 专业 从 事 半 导 体 功率 器 件 和 其 他 电子 产品 封装 的 优秀 供应 商 。 
管理 体系 


工厂 严格 实行 1S0 9001、IS0 14001 和 TS 16949 管 理 体系 ， 产 品 符合 RoHS 环保 认证 、REACH 环 保 要 求 。 
主 营 产 品 有 肖 特 基 二 极 管 、 快 恢复 二 极 管 、 三 极 管 、 可 控 硅 、 场 效应 管 、 桥 堆 、 稳 压 管 、TVS 等 各 类 元 器 件 ， 广 泛 应 用 于 
照明 灯饰 、 整 流 器 、 充 电器 、 开 关 电 源 、 音 响 等 行业 。 


Copyright © 2017 宇宙 电子 














臣 100% ~ 





图 2-11 页 面 显示 效果 
代码 如 下 : 


<htm> 
<head> 


<title> 宇 宙 电 子 业务 简介 < /title> 
< /head> 
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<body> 
<m alignr "oanter"> 业 务 简介 < /ht> < 上 -一 级 标题 --> 
<hr size="]" color= "orange"/> <!- -水 平分 隔 线 --> 
<h2> 宇 宙 微 电子 封装 测试 基地 < /h2> 
<Fr gbep;&rbep;&bep;&rbsp; 宇宙 微 电 子 封装 测试 基地 启动 于 ……( 此 处 省 略 文字 )< /p> 
<h2> 管 理 体系 < /hb2> < 上 -二 级 标题 --> 
<Pp align= "lJeft"> <!-- 段 落 左 对 齐 --> 


snbsp; sribsp; &nbsp; snbsp; 工 厂 严 格 实行 ISO 9001…… (此 处 省 略 文字 )<br /><br /> 
snbsp; sribsp; snbsp; sribsp; 主 营 产 品 有 肖 特 基 二 极 管 ……( 此 处 省 略 文字 ) 
</p 
< font face= "微软 雅 黑 " size="5" color= "red"> 服 务 宗旨 < /font> <br/> 
<blockouote> 
卓越 品质 <br/> 
服务 创新 <br/> 
战略 合作 <br/> 
文化 传承 
< /blockquote> 
<hr size= "1" color= "orange"> < !-- 水 平分 隔 线 --> 
<p align= "center"> Copyright gcopy; 2017 宇宙 电子 < /p> 
< /body> 
< /htm> 
【说 明 】 HTML 不 建议 使 用 过 h 之 标签 的 align 对 齐 属性 ,可 以 使 用 CSS 设置 标题 


的 样式 。 


25 列 表 


列表 是 以 结构 化 、 易 读 性 的 方式 提供 信息 的 方法 。 不 但 使 用 户 可 以 方便 地 查找 重要 
的 信息 ,而且 使 文档 结构 更 加 清晰 明确 。 在 制作 网 页 时 ,列表 经 常 被 用 来 写 提纲 和 品种 说 
明 书 。 通 过 列表 标签 的 使 用 能 使 这 些 内 容 在 网 页 中 条 理 清晰 、 层 次 分 明 ,格式 美观 的 表现 
出 来 。 本 节 将 重点 介绍 列表 标签 的 使 用 。 

列表 的 存在 形式 主要 分 为 : 无 序列 表 、 有 序列 表 、 定 义 列表 以 及 嵌 套 列表 等 。 


2.5.1 无 序列 表 


无 序列 表 就 是 列表 中 列表 项 的 前 导 符号 没有 一 定 的 次 序 , 而 是 用 黑 点 、 圆 圈 、 方 框 等 
一 些 特殊 符号 标识 。 无 序列 表 并 不 会 使 列表 项 杂乱 无 章 ,而 是 使 列表 项 的 结构 更 清晰 、 更 
合理 。 

当 创 建 一 个 无 序列 表 时 ,主要 使 用 HTML 的 二 ul 二 标签 和 二 li 二 标签 来 标记 。 其 中 
二 ul 二 标签 标识 一 个 无 序列 表 的 开始 ,二 li 二 标签 标识 一 个 无 序列 表 项 。 格 式 如 下 : 

< 册 typ=" 符 号 类 型 吃 

<1 type=" 符 号 类 型 1> 第 一 个 列表 项 
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<1i type= "符号 类 型 2> 第 二 个 列表 项 


< 

从 浏览 器 上 看 ,无 序列 表 的 特点 是 : 列表 项 目 作为 一 个 整体 ,与 上 下 段 文本 间 各 有 一 
行 空白 ; 表 项 向 右 缩 进 并 左 对 齐 , 每 行 前 面 有 项 目 符号 。 

去 ul> 标 签 的 type 属性 用 来 定义 一 个 无 序列 表 的 前 导 字 符 , 如 果 省 略 了 type 属性 ， 
浏览 器 会 默认 显示 为 “disc” 前 导 字 符 。type 取 值 可 以 为 disc( 实 心 圆 ) ,circle( 空 心 圆 )、 
square( 方 框 )。 设 置 type 属性 的 方法 有 以 下 两 种 。 


1. 在 < 吉之 后 指定 符号 的 样式 
在 二 ul 二 后 指定 符号 的 样式 ,可 设 定 直到 二 /ul 二 的 加 重 符号 。 例 如 : 


<ul type= "disc> // 符 号 为 实心 加 点 @ 
<ul type= "circle"> // 符 号 为 空心 圆 点 〇 

< ul type= "square"> // 符 号 为 方块 国 

<ul img src= "mygraph.gif"> // 符 号 为 指定 的 图 片 文件 


2. 在 过 li 之 后 指定 符号 的 样式 


在 过 li> 后 指定 符号 的 样式 ,可 以 设置 从 该 过 li 二 起 到 二 /ul 二 的 项 目 符号 。 格 式 就 是 
将 前 面 的 ul 换 为 li。 
【 例 2-12】 使 用 无 序列 表 显 示 宇 宙 乐 园 的 文章 分 类 ， 














本 例文 件 2-12. html 的 浏览 效果 如 图 2-12 所 示 。 re 
代码 如 下 : - 
文章 分 类 
<h2> 文 章 分 类 < /h2> 
< 册 bpe= "circle> “上 -列表 样式 为 空心 圆 点 -> ba 
< 1i> 科 技 前 沿 o 心得 体验 
<1i> 宇 宙 社 区 o 宇宙 学 堂 
<1i> 心 得 体验 
<1> 宇 宙 学 堂 
</up> 图 2-12 无 序列 表 


在 上 面 的 示例 中 ,由 于 在 过 ul 之 后 指定 符号 的 样式 为 type 二 "circle" ,因此 每 个 列表 
项 显示 为 空心 圆 点 。 


2.5.2 有 序列 表 


有 序列 表 是 一 个 有 特定 顺序 的 列表 项 的 集合 。 在 有 序列 表 中 ,各 个 列表 项 有 先后 顺 
序 之 分 ,它们 之 间 以 编号 来 标记 。 使 用 二 ol 二 标签 可 以 建立 有 序列 表 , 表 项 的 标签 仍 为 
<li 之 。 格 式 如 下 ， 
<ol type=" 符 号 类 型 吃 
<1 bpe= "符号 类 型 1> 表 项 1 
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<1 type= "符号 类 型 2"> 表 项 2 


</ol> 

在 浏览 器 中 显示 时 ,有 序列 表 整 个 表 项 与 上 下 段 文本 之 间 各 有 一 行 空白 ;列表 项 目 向 
右 缩 进 并 左 对 齐 ;各 表 项 前 带 顺序 号 。 

有 序 的 符号 标识 包括 阿拉 伯 数 字 、 小 写 英文 字母 .大 写 英文 字母 .小 写 罗马 数字 、 大 写 
罗马 数字 。 二 ol 二 标签 的 type 属性 用 来 定义 一 个 有 序列 表 的 符号 样式 ,在 二 ol 二 后 指定 
符号 的 样式 ,可 设 定 直 到 二 /ol 二 的 表 项 加 重 记号 。 格 式 如 下 : 


<ol type= "1"™> // 序 号 为 数字 

<ol type= A> // 序 号 为 大 写 英 文字 母 
<oal type= "a™> // 序 号 为 小 写 英文 字母 
<ol type= "I"> // 序 号 为 大 写 罗马 字母 
<ol type= "in> // 序 号 为 小 写 罗 马 字母 


在 二 li> 后 指定 符号 的 样式 ,可 设 定 该 表 项 前 的 加 重 记 号 。 格 式 只 需 把 上 面 的 ol 改 
为 li。 
【 例 2-13】 使 用 有 序列 表 显 示 字 宙 学 堂 注册 步骤 ,本 三 


























例文 件 2-13. html 的 浏览 效果 如 图 2-13 所 示 。 SA 
代码 如 下 : - 
宇宙 学 堂 注 册 步 又 
<h2> 宇 宙 学 堂 注册 步骤 < /h2> We 
<ol type= "I"> < 上 -列表 样式 为 大 写 罗马 字母 --> 开 村 过 全 信息: 
<1i> 填 写 会 员 信息 ; III， 激 活 会 员 账号 
<1> 接 收 电子 邮件 ; IY， 注 册 成 功 。 
< 1i> 激 活 会 员 账号 ; re 
<1i> 注 册 成 功 。 
Se 图 2-13 有 序列 表 


在 上 面 的 示例 中 ,由 于 在 二 ol 二 后 指定 列表 样式 为 大 写 罗马 字母 ,因此 每 个 列表 项 显 
示 为 大 写 罗马 字母 。 


2.5.3 定义 列表 


定义 列表 又 称 为 释义 列表 或 字典 列表 ,定义 列表 不 是 带 有 前 导 字 符 的 列 项 目 , 而 是 
一 列 实物 以 及 与 其 相关 的 解释 。 当 创建 一 个 定义 列表 时 ,主要 用 到 3 个 HTML 标签 ; 
即 <dl 二 标签 .二 dt 二 标签 .二 dd 二 标签 。 格 式 如 下 : 
<dl> 
<dt> .第 一 个 标题 项 .< /dt> 


<d 中 .. 对 第 一 个 标题 项 的 解释 文字 .< /dd> 
<dt> .第 二 个 标题 项 -< /at> 


<d 中 .对 第 二 个 标题 项 的 解释 文字 .x /dd> 
</dl> 
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在 过 dl>、 志 dt 之 和 所 dd> 这 3 个 标签 组 合 中 ,二 dt 二 是 标题 ,二 dd 二 是 内 容 ,二 dl 
可 以 看 作 承 载 它 们 的 容器 。 当 出 现 多 组 这 样 的 标签 组 合 时 ,应 尽量 使 用 一 个 二 dt 二 标 
配合 一 个 dd 二 标签 的 方法 。 如 果 二 dd 二 标签 中 内 容 很 二 = 
多 ,可 以 摧 套 二 p 二 标签 使 用 。 

【 例 2-14】 使 用 定义 列表 显示 宇宙 学 堂 联系 方式 ， 
本 例文 件 2-14. html 的 浏览 效果 如 图 2-14 所 示 。 字 宙 学 堂 联系 方式 广 

代码 如 下 : 

<h2> 宇 宙 学 堂 联 系 方式 < /h2> 地 址 ， 

<d> 开封 市 复兴 大 道 3 号 


<dt> 电 话 : < /dt> 
< dd> 400- 820- 1111< /dd> 


<dt> 地 址 : </dt> 
< 中 开封 市 复兴 大 道 3 号 < /a> 和 
</dl> 
在 上 面 的 示例 中 ,二 dl 二 列表 中 每 一 项 的 名 称 不 再 是 二 li 二 标签 ,而 是 用 二 dt 二 标签 
进行 标记 ,后 面 跟着 由 过 dd 之 标签 标记 的 条 目 定义 或 解释 。 默 认 情 况 下 ,浏览 器 一 般 会 
在 左边 界 显示 条 目的 名 称 , 并 在 下 一 行 缩 进 显 示 其 定义 或 解释 。 





全 DAweb\ch22-14t D7 0 





: 
400-820-1111 





2.5.4 散 套 列表 


所 谓 嵌 套 列 表 , 就 是 无 序列 表 与 有 序列 表 嵌 套 混 合 使 用 。 嵌 套 列表 可 以 把 页 面 分 为 
多 个 层次 ,给 人 以 很 强 的 层次 感 。 有 序列 表 和 无 
序列 表 不 仅 可 以 自身 租 套 ,而 且 彼 此 可 互相 嵌 套 。 casto- OX 
嵌 套 方式 可 分 为 : 无 序列 表 中 髓 套 无 序列 表 、 有 序 [Sms | 
列表 中 嵌 套 有 序列 表 、 无 序列 表 中 榜 套 无 序列 表 、 


























有 序列 表 中 工 套 有 序列 表 等 方式 ,使 用 者 需要 灵 字 宙 乐园 
了 文章 分 类 
活 掌握 。 四 + 
【 例 2-15】 制作 宇宙 乐园 页 面 ,本 例文 件 2-15 i 
.html 在 浏览 器 中 的 显示 效果 如 图 2-15 所 示 。 外 
代码 如 下 : o 宇宙 学 堂 注册 步骤 
a。 填写 会 员 信息 ， 
i b. Ps 
<head> 4d 哺 规 
<meta charset= "gb2312"> - 
<title> 幅 套 列 表 < /title> o 二 主人 生计 条 广 3 
< /heac> 400-820-1111 
<body> : 
<h2 align= "center> 宇 宙 乐 园 < /h2> 封 市 复兴 大 道 3 号 








<ul type= "circler> 
< 二 -无 序列 表 空 心 圆 点 --> 
<1i> 文 章 分 类 图 2-15 例 2-15 的 页 面 显示 效果 
<u type= "squarer> < !- -和 嵌 套 无 序列 表 ,. 列 表 


区 100% ~ 





32 


第 2 章 HM 5 语言 基础 





项 样式 为 方块 --> 
<1i> 科 技 前 沿 
<1i> 宇 宙 社 区 
<1i> 心 得 体验 
<1i> 宇 宙 学 堂 
</u> 
<hr 人 > < 二 -水 平分 隔 线 --> 
<1i> 宇 宙 学 堂 注册 步骤 
<ol type= "a"> < 二- 艇 套 有 序列 表 , 列 表 项 序号 为 小 写 英文 字母 --> 
<1i> 填 写 会 员 信息 ; 
<1i> 接 收 电子 邮件 ; 
<1i> 激 活 会 员 账号 ; 
<1i> 注 册 成 功 。 
</ol> 
<hr /> <!-- 水 平分 隔 线 --> 
<1i> 宇 宙 学 堂 联系 方式 
<dl> < 上 二- 艇 套 定义 列表 --> 
<dt> 电 话 : < /dt> 
< dd> 400- 820- 1111< /dd> 
<dt> 地 址 : < /at> 
< dd 开封 市 复兴 大 道 3 号 < /dd> 
</dl> 
</u> 
< /body> 
</htm> 


26 图 像 


图 像 是 美化 网 页 最 常用 的 元 素 之 一 。HTML 的 一 个 重要 特性 就 是 可 以 在 文本 中 加 
入 图 像 , 既 可 以 把 图 像 作为 文档 的 内 在 对 象 加 入 ,又 可 以 通过 超 链接 的 方式 加 入 ,还 可 以 
将 图 像 作为 背景 加 入 文档 中 。 


2.6.1 网 页 图 像 的 格式 及 使 用 要 点 


1. 常用 的 网 页 图 像 格式 


虽然 有 很 多 种 计算 机 图 像 格式 ,但 由 于 受 网 络 带宽 和 浏览 器 的 限制 ,在 网 页 上 常用 的 
图 像 格 式 有 3 种 : 即 GIF JPEG 和 PNG 。 

(1) GIF。GIF 是 Internet 上 应 用 最 广泛 的 图 像 文件 格式 之 一 ,是 一 种 索引 颜色 的 图 
像 格式 。 该 格式 在 网 页 中 使 用 较 多 , 它 的 特点 是 体积 小 ,支持 小 型 翻 页 型 动画 。GIF 图 像 
最 多 可 以 使 用 256 种 颜色 ,最 适合 制作 徽标 .图标 、 按 钮 和 其 他 颜色 .风格 比较 单一 的 
图 片 。 

(2) JPEG。JPEG 是 Internet 上 应 用 最 广泛 的 图 像 文件 格式 之 一 ,适用 于 摄影 或 连 
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续 色 调 图 像 。JPG 文件 可 以 包含 多 达 数 百 万 种 颜色 ,因此 JPG 格式 的 文件 体积 较 大 ,图 
片 质量 较 佳 。 通 常 可 以 通过 压缩 JPG 文件 在 图 像 品 质 和 文件 大 小 之 间 取 得 良好 的 平衡 。 
当 网 页 中 对 图 片 的 质量 有 要 求 时 ,建议 使 用 此 格式 。 

(3) PNG。PNG 是 一 种 新 型 的 无 专利 权限 的 图 像 格式 , 兼 有 GIF 和 JPG 的 优点 。 
它 的 显示 速度 很 快 ,只 需 下 载 1/64 的 图 像 信息 就 可 以 显示 出 低 分 辨 率 的 预览 图 像 。 它 可 
以 用 来 代替 GIF 格式 ,同样 支持 透明 层 , 在 质量 和 体积 方面 都 具有 优势 ,适合 在 网 络 中 
传输 。 


2. 使 用 网 页 图 像 的 要 点 


(1) 高 质量 的 图 像 因 其 图 像 体 积 过 大 ,不 太 适 合 网 络 传输 。 一 般 在 网 页 设计 中 选择 
的 图 像 不 要 超过 8SKB, 如 必须 选用 较 大 图 像 时 ,可 先 将 其 分 





成 若干 小 图 像 ,显示 时 再 通过 表格 将 这 些小 图 像 拼 合 起 来 。 | 一 上 

(2) 如 果 在 同一 文件 中 多 次 使 用 相同 的 图 像 时 ,最 好 使 | .入 
用 相对 路 径 查找 该 图 像 。 相 对 路 径 是 相对 于 文件 而 言 , 从 相 和， 
对 文件 所 在 目录 依次 往 下 直到 文件 所 在 的 位 置 。 例 如 ,文件 
X.Y 与 A 文件 夹 在 同一 目录 下 ,那么 文件 B.A 在 目录 人 A 下 一 万 
的 也 文件 夹 中 , 它 对 于 文件 X.Y 的 相对 路 径 则 为 A/B/B. bE 和 让 | 
A, 如 图 2-16 所 示 。 Me 
2.6.2 图 像 标签 一 车 











在 HTML 中 ,用 二 img> 标 签 在 网 页 中 添加 图 像 ,图 像 图 2-16 相对 路 径 
是 以 嵌入 的 方式 添加 到 网 页 中 的 。 图 像 标签 的 格式 如 下 
<img src= "图 像 文 件 名 " alt= " 哄 代 文字 "title= "鼠标 悬 停 提 示 文 字 " width= "图 像 宽度 " 


height= "图 像 高 度 " border= "边框 宽度 " hspace= "水 平 空 白 " vspace= " 重 直 空白 " 
align= "环绕 方式 1 对齐 方式 " /> 


标签 中 的 属性 说 明 见 表 2-4, 其 中 src 是 必需 的 属性 。 
表 2-4 图 像 标签 的 常用 属性 

属 性 说 明 
sre 指定 图 像 源 , 即 图 像 的 URL 路 径 
alt 如 果 图 像 无 法 显示 ,代替 图 像 的 说 明文 字 
title 为 用 户 提供 额外 的 提示 或 帮助 信息 ,方便 用 户 使 用 
指定 图 像 的 显示 宽度 (像素 数 或 百分数 ) ,通常 只 设 为 图 像 的 真实 大 小 以 免 失 真 。 若 需要 改 
width | 变 图 像 大 小 ,最 好 事先 使 用 图 像 编辑 工具 进行 修改 。 百 分 数 是 指 相对 于 当前 浏览 器 窗口 的 
百分比 
height | 指定 图 像 的 显示 高 度 (像素 数 或 百分数 ) 
border | 指定 图 像 的 边框 大 小 ,用 数字 表示 ,默认 单位 为 像素 ,默认 情况 下 图 片 没有 边框 , 即 border 一 0 
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续 表 
属 性 说 明 
hspace | 设 定 图 片 左 侧 和 右 侧 的 空白 像素 数 (水 平 边 距 ) 
vspace | 设 定 图 片 顶部 和 底部 的 空白 像素 数 (垂直 边 距 ) 
指定 图 像 的 对 齐 方式 , 设 定 图 像 在 水 平 ( 环 绕 方式 ) 或 垂直 方向 (对 齐 方式 ) 上 的 位 置 ,包括 


align ”| left( 图 像 居 左 ,文本 在 图 像 的 右边 ) \right( 图 像 居 右 , 文 本 在 图 像 的 左边 ) ,top( 文 本 与 图 像 
在 顶部 对 齐 ) ,middle( 文 本 与 图 像 在 中 央 对 齐 ) 或 bottom( 文 本 与 图 像 在 底部 对 齐 ) 














需要 注意 的 是 ,在 width 和 height 属性 中 ,如 果 只 设置 了 其 中 的 一 个 属性 , 则 另 一 
属性 会 根据 已 设置 的 属性 按 原 图 等 比例 显示 。 如 果 对 两 个 属性 都 进行 了 设置 , 且 其 比例 
和 原 图 大 小 的 比例 不 一 致 ,那么 显示 的 图 像 会 相对 于 原 图 变形 或 失真 。 


1. 图 像 的 替换 文本 说 明 


有 时 ,由 于 网 络 过 忙 或 者 用 户 在 图 片 还 没有 下 载 完 全 就 单 击 了 浏览 器 的 停止 键 ,导致 
用 户 不 能 在 浏览 器 中 看 到 图 片 , 替 换文 本 说 明 就 十 分 有 必要 了 。 蔡 换文 本 说 明 应 该 简洁 
清晰 ,能 为 用 户 提供 足够 的 图 片 说 明 信 息 ,使 用 户 在 无 法 看 到 图 片 的 情况 下 也 可 以 了 解 图 
片 的 内 容 信息 。 


2. 调整 图 像 大 小 


在 HTML 中 ,通过 一 img 之 标签 的 属性 width 和 height 调整 图 像 大 小 ,其 目的 是 通 
指定 图 像 的 高 度 和 宽度 加 快 图 像 的 下 载 速度 。 默 认 情 况 下 ,页面 中 显示 的 是 图 像 的 原 
始 大 小 。 如 果 不 设置 width 和 height 属性 ,浏览 器 就 要 等 到 图 像 下 载 完 毕 才 显示 网 页 ， 
因此 延缓 了 其 他 页 面 元 素 的 显示 。 
width 和 height 的 单位 可 以 是 像素 ,也 可 以 是 百分比 。 百 分 比 表 示 显 示 图 像 大 小 为 
浏览 器 窗口 大 小 的 百分比 。 
例如 ,设置 产品 图 像 的 宽度 和 高 度 。 代 码 如 下 : 


< img src= "images/prod.jpg" width= "200" height= "150" /> 
3. 图 像 的 边框 


在 网 页 中 显示 的 图 像 如 果 没 有 边框 ,会 显得 有 些 单 调 , 可 以 通过 二 img 二 标签 的 
border 属性 为 图 像 添 加 边框 ,添加 边框 后 的 图 像 显 得 更 醒目 .美观 。 

border 属性 的 值 用 数字 表示 ,单位 为 像素 ;默认 情况 下 图 像 没 有 边框 , 即 border 一 0; 
图 像 边框 的 颜色 不 可 调整 ,默认 为 黑色 ; 当 图 片 作为 超 链接 使 用 时 ,图 像 边框 的 颜色 和 文 
字 超 链接 的 颜色 一 致 ,默认 为 深蓝 色 。 

【 例 2-16】 图 像 的 基本 用 法 ,本 例文 件 2-16. html 在 浏览 器 中 正常 显示 的 效果 如 
图 2-17 所 示 , 当 显示 的 图 像 路 径 错误 时 ,效果 如 图 2-18 所 示 。 


35 


| 中 前端 开发 实例 教程 一 HM_5+ JavaScript + jQuery 















































-号 -区 到 
但 


CN 个 DAweb\cha2-16t: DP- OX)| 0 












































图 2-17 正常 显示 的 图 像 效 果 图 2-18 图 像 路 径 错误 时 的 显示 效果 
代码 如 下 : 


<htm> 
<head> 
<title> 图 像 的 基本 用 法 < /title> 
< /head> 
<body> 
< img src= "images/com.jpg" width= "264" height= "175" border= "ln alt= "公司 
简介 " title=" 宇 宙 电 子 "/> 
< /body> 
< /him> 
【说 明 】 
(1) 当 显 示 的 图 像 不 存在 时 ,页 面 中 图 像 的 位 置 将 显示 出 网 页 图 片 丢 失 的 信息 ,但 由 
于 设置 了 alt 属性 ,因此 在 四 的 右边 显示 出 替代 文字 “公司 简介 ”。 同 时 ,由 于 设置 了 title 
属性 ,因此 在 替代 文字 附近 还 显示 出 提示 信息 “宇宙 电子 ”。 
(2) 在 使 用 二 img 二 标签 时 ,最 好 同时 使 用 alt 属性 和 title 属性 ,避免 因 图 片 路 径 错 
误 带 来 错误 信息 ,同时 ,增加 了 鼠标 提示 信息 也 方便 了 浏览 者 的 使 用 。 


2.6.3 设置 网 页 背景 图 像 


在 网 页 中 可 以 利用 图 像 作为 背景 ,就 像 在 照相 的 时 候 经 常 要 取 一 些 背 景 一 样 。 但 是 
注意 不 要 让 背景 图 像 影 响 网 页 内 容 的 显示 ,因为 背景 图 像 只 是 起 到 泻 染 网 页 的 作用 。 此 
外 ,背景 图 片 最 好 不 要 设置 边框 ,这 样 有 利于 生成 无 颖 背景 。 

背景 属性 将 背景 设置 为 图 像 。 属 性 值 为 图 片 的 URL。 如 果 图 像 尺 寸 小 于 浏览 器 窗 
口 ,那么 图 像 将 在 整个 浏览 器 窗口 进行 复制 。 格 式 如 下 : 


<body background= "背景 图 像 路 径 "> 


设置 网 页 背景 图 像 应 注意 以 下 要 点 。 
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。 背景 图 像 是 否 增加 了 页 面 的 加 载 时 间 , 背 景 图 像 文件 大 小 不 应 超过 10KB。 

。 背景 图 像 是 否 与 页 面 中 的 其 他 图 像 搭配 合适 。 

。 背景 图 像 是 否 与 页 面 中 的 文字 颜色 搭配 合适 。 

【 例 2-17】 设置 网 页 背景 图 像 ,本 例文 件 2-17. html 在 浏览 器 中 的 显示 效果 如 图 2-19 
所 示 。 

代码 如 下 : 


<html> 
<head> 
<meta charset= "go?312" /> 
<title> 设 置 网 页 背景 图 像 < /title> 




















< /head> 
< body background= "images/com.jpg"> 
< /pody> 
< /htm> 
ED Es) 
©] Diweb\ch2\2-17.html PpP-ox|n eo 























图 2-19 设置 网 页 背景 图 像 


2.6.4 图 文 混 排 


图 文 混 排 技术 是 指 设置 图 像 与 同一 行 中 的 文本 、 图 像 插 件 或 其 他 元 素 的 对 齐 方式 。 
在 制作 网 页 时 要 在 网 页 中 的 某 个 位 置 插入 一 个 图 像 ,使 文本 环绕 在 图 像 的 周围 。 
二 img 二 标签 的 align 属性 用 来 指定 图 像 与 周围 元 素 的 对 齐 方式 ,实现 图 文 混 排 效 
果 , 其 取 值 见 表 2-5。 
与 其 他 元 素 不 同 的 是 ,图 像 的 align 属性 既 包 括 水 平 对 齐 方式 ,又 包括 垂直 对 齐 方 
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式 。align 属性 的 默认 值 为 bottom。 
表 2-5 图 像 的 align 属性 的 取 值 























align 的 取 值 说 明 

left 在 水 平方 向 上 向 上 左 对 齐 

center 在 水 平方 向 上 向 上 居中 对 齐 

right 在 水 平方 向 上 向 上 右 对 齐 

top 图 片 项 部 与 同行 其 他 元 素 硕 部 对 齐 
middle 图 片 中 部 与 同行 其 他 元 素 中 部 对 齐 
bottom 图 片 底部 与 同行 其 他 元 素 底部 对 齐 


2.6.5 ”案例 一 一 制作 宇宙 电子 经 营 模 式 图 文 简介 页 面 


【 例 2-18】 制作 宇宙 电子 经 营 模式 图 文 简介 页 面 , 本 例文 件 2-18. html 在 浏览 器 


的 显示 效果 如 图 2-20 所 示 。 





























> 二 
=) a oaweb\ch2\2-18.htm p-oxD 
[合计 电子 经 营 模式 国文 简介 x 























守 视 让 实用 村 次 化 和 宫 抽 化 服务 相 


了 


加 


六 4 后 内 估 民 产 品 生 疡 服务 各 
质保 证 





宗主 代 电 训 寺 站 的 这 关 遇 全 动 卫 2300 
年 ， 是 一 家 专业 从 事 半 导 体 功率 器 件 和 > 
其 他 电子 产品 封装 的 优秀 供应 商 。 工 | 具备 从 美国 、 德国 、 日 本 等 国际 和 地 区 原装 
进口 的 世界 一 流 的 生产 设备 和 测试 仪器 









































图 2-20 例 2-18 的 页 面 显示 效果 


代码 如 下 : 


<htm> 
<head> 
<meta charset= "gb2312" /> 
<title> 宇 宙 电 子 经 营 模式 图 文 简 介 < /title> 
< /head> 
<body> 
<hl alignr "center"> 经 营 模式 < /hl> 
<hr/> 
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< img srcr "imeges/oam. jpg" widthr "264" height= "175" alignr "right" hspaoe— 
"20" vspace= "10"alt= "经 营 模式 "/> 宇 窗 电 子 采用 标准 化 和 定制 化 服务 相 结 合 的 经 
营 模 式 ,…… 此 处 省 略 文字 ) 
< /body> 

< /htm> 

【说 明 】 

(1) 本 例 中 图 像 设 置 了 align 一 "right" ,实现 了 图 像 居 右 文字 居 左 的 图 文 混 排 效果 ; 
同时 图 像 还 设置 了 hspace 二 "20" 和 vspace 二 "10" ,定义 了 图 像 和 文字 之 间 的 水 平 间 距 和 
垂直 间距 。 

(2) 如 果 不 设 置 文本 对 图 像 的 环绕 ,图 像 将 在 页 面 中 占用 一 整 片 空白 区 域 。 


27 超 链 接 


HTML 的 核心 就 是 能 够 轻而易举 地 实现 互联 网 上 的 信息 访问 .资源 共享 。HTML 
可 以 链接 到 其 他 的 网 页 图像、 多 媒体 .电子 邮件 地 址 .可 下 载 的 文件 等 。 


2.7.1 超 链接 概述 


1. 超 链接 的 定义 


超 链接 (hyperlink) 是 指 从 一 个 网 页 指向 一 个 目标 的 连接 关系 ,这 个 目标 可 以 是 另 一 
个 网 页 ,也 可 以 是 相同 网 页 上 的 不 同位 置 ,还 可 以 是 一 个 图 片 ,一 个 电子 邮件 地 址 ,一 个 文 
件 , 甚 至 是 一 个 应 用 程序 。 

超 链接 是 一 个 网 站 的 精髓 。 超 链接 在 本 质 上 属于 网 页 的 一 部 分 ,通过 超 链 接 将 各 个 
网 页 链接 在 一 起 后 ,才能 真正 构成 一 个 网 站 。 

超 链接 除了 可 链接 文本 外 ,也 可 链接 各 种 媒体 ,如 声音 、 图 像 和 动画 等 ,通过 它们 可 以 
将 网 站 建设 成 一 个 丰富 多 彩 的 多 媒体 世界 。 当 网 页 中 包含 超 链接 时 ,其 外 观 形式 为 彩色 
(一 般 为 蓝 色 ) 且 带 下 划 线 的 文字 或 图 像 。 单 击 这 些 文本 或 图 像 ,可 跳 转 到 相应 位 置 。 鼠 
标 指针 指向 超 链 接 时 ,将 变 成 手 形 。 


2. 超 链接 的 分 类 


根据 超 链接 目标 文件 的 不 同 , 超 链接 可 分 为 页 面 超 链接 、 锚 点 超 链 接 . 电 子 邮件 超 接 
链 等 ;根据 超 链接 单 击 对 象 的 不 同 , 超 链 接 可 分 为 文本 超 链接 .图 像 超 链接 .图像 映 射 等 。 


3. 路 径 


创建 超 链接 时 必须 了 解 链接 与 被 链接 文本 的 路 径 。 在 一 个 网 站 中 ,路 径 通常 有 

3 种 表示 方式 : 即 绝对 路 径 、 根 目录 相对 路 径 和 文档 目录 相对 路 径 。 
(1) 绝对 路 径 。 绝 对 路 径 是 包括 通信 协议 名 、 服 务 器 名 、 路 径 及 文件 名 的 完全 路 径 。 
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如 链接 清华 大 学 信息 科学 技术 学 院 首 页 ,绝对 路 径 是 http://www. sist. tsinghua. edu. 
cn/docinfo/index. jsp。 如 果 站 点 之 外 的 文档 在 本 地 计算 机 上 ,比如 连接 DD 盘 book 目录 
下 default. html 文件 ,那么 它 的 路 径 就 是 file://D:/book/default. html, 这 种 完整 地 描述 
文件 位 置 的 路 径 也 是 绝对 路 径 。 

(2) 根 目录 相对 路 径 。 根 目录 相对 路 径 的 根 是 指 本 地 站 点 文件 夹 ( 根 目录 ), 以 “/” 开 
头 , 路 径 是 从 当前 站 点 的 根 目 录 开 始 计算 。 比 如 一 个 网 页 链接 或 引用 站 点 根 目录 下 
images 目录 中 的 一 个 图 像 文件 a. gif, 用 根 相 对 路 径 表示 就 是 /images/a. gif。 

(3) 文档 目录 相对 路 径 。 文 档 目 录 相 对 路 径 是 指 包 含 当 前 文档 所 在 的 文件 夹 , 也 就 
是 以 当前 文档 所 在 的 文件 夹 为 基础 开始 计算 路 径 。 文 档 目录 相对 路 径 适 合 于 创建 网 站 内 
部 链接 。 它 是 以 当前 文件 所 在 的 路 径 为 起 点 ,进行 相对 文件 的 查找 。 


2.7.2 超 链接 的 应 用 


1. 创建 锚 点 


锚 点 与 链接 的 文字 可 以 在 同一 个 页 面 ,也 可 以 在 不 同 的 页 面 。 在 实现 锚 点 链接 之 前 ， 
需要 先 创建 锚 点 ,通过 创建 的 锚 点 才能 对 页 面 的 内 容 进 行 引 导 与 跳 转 。 
创建 锚 点 的 语法 格式 如 下 : 


<a href= "url" title= "指向 链接 显示 的 文字 " target= "窗口 名 称 史 热点 文本 </a> 


其 中 , 锚 点 的 名 称 可 以 是 数字 或 英文 字母 ,或 者 两 者 混合 。 在 同一 页 面 中 可 以 有 多 个 
锚 点 ,但 名 称 不 能 相同 。 

建立 链接 时 ,href 属性 定义 了 这 个 链接 所 指 的 目标 地 址 ,也 就 是 路 径 。 如 果 要 创建 一 
个 不 链接 到 其 他 位 置 的 空 超 链 接 , 可 用 “# ”代替 URL。 

target 属性 设 定 链接 被 单 击 后 所 要 开始 窗口 的 方式 ,有 以 下 4 种 方式 。 

_blank: 在 新 窗口 中 打开 被 链接 文档 。 

_self: 默认 。 在 相同 的 框架 中 打开 被 链接 文档 。 

_parent: 在 父 框 架 集 中 打开 被 链接 文档 。 

_top: 在 整个 窗口 中 打开 被 链接 文档 。 


2. 在 不 同 页 面 中 使 用 锚 点 


在 不 同 页 面 中 使 用 锚 点 ,就 是 在 当前 页 面 与 其 他 相关 页 面 之 间 建 立 超 链 接 。 根 据 目 
标 文件 与 当前 文件 的 目录 关系 .有 4 种 写法 。 注 意 ,应 该 尽量 采用 相对 路 径 。 

1) 链接 到 同一 目录 内 的 网 页 文件 

格式 如 下 : 


<ahref= "目标 文件 名 .html> 热 点 文本 < /a> 


其 中 ,“ 目 标 文件 名 ”是 链接 所 指向 的 文件 。 
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2) 链接 到 下 一 级 目录 中 的 网 页 文件 
格式 如 下 : 


<ahref= " 呼 目 录 名 /目标 文件 名 .html> 热 点 文本 </a> 

3) 链接 到 上 一 级 目录 中 的 网 页 文件 

格式 如 下 : 

<a href="../ 目 标 文件 名 .html"> 热 点 文本 </a> 

其 中 ,“../” 表 示 退 到 上 一 级 目录 中 。 

4) 链接 到 同 级 目录 中 的 网 页 文件 

格式 如 下 : 

<ahref="../ 子 目录 名 /目标 文件 名 .html"> 热 点 文本 < /a> 
表示 先 退 到 上 一 级 目录 中 ,然后 再 进入 目标 文件 所 在 的 目录 。 


3. 书签 链接 


在 浏览 页 面 时 ,如 果 页 面 篇 幅 很 长 ,要 不 断 地 拖 动 滚动 条 ,给 浏览 带 来 不 便 ,要 是 浏览 
者 既 可 以 从 头 阅 读 到 尾 , 又 可 以 很 快 寻找 到 自己 感 兴趣 的 特定 内 容 进 行 部 分 阅读 ,这 个 时 
候 就 可 以 通过 书签 链接 来 实现 。 当 浏览 者 单 击 页 面 上 的 某 一 “标签 ”, 就 能 自动 跳 到 网 页 
相应 的 位 置 进行 阅读 ,大 大 方便 了 浏览 者 的 阅读 。 

书签 就 是 用 二 a 二 标签 对 网 页 元 素 作 一 个 记号 ,其 功能 类 似 于 用 于 固定 船 的 锚 , 所 以 
书签 也 称 锚 记 或 锚 点 。 如 果 页 面 中 有 多 个 书签 链接 ,对 不 同 目标 元 素 要 设置 不 同 的 书签 
名 。 书 签名 在 二 a 二 标签 的 name 属性 中 定义 ,格式 如 下 : 


<aname=" 记 号 名 吃 目 标 文本 附近 的 内 容 < /a> 

(1) 页 面 内 书签 的 链接 。 要 在 当前 页 面 内 实现 书签 链接 ,需要 定义 两 个 标签 : 一 个 
为 超 链 接 标签 ; 另 一 个 为 书签 标签 。 超 链接 标签 的 格式 如 下 : 

<ahref= 只 记号 名 吃 热 点 文本 </a> 
即 单 击 “ 热 点 文本 ”, 将 跳 转 到 “记号 名 ”开始 的 网 页 元 素 。 

(2) 其 他 页 面 书签 的 链接 。 书 签 链接 还 可 以 在 不 同 页 面 间 进行 链接 。 当 单 击 书签 链 
接 标 题 , 页 面 会 根据 链接 中 的 href 属性 所 定 的 地 址 ,将 网 页 跳 转 到 目标 地 址 中 书签 名 称 
所 表示 的 内 容 。 要 在 其 他 页 面 内 实现 书签 链接 ,需要 定义 两 个 标签 : 一 个 为 当前 页 面 的 
超 链接 标签 ; 另 一 个 为 跳 转 页 面 的 书签 标签 。 当 前 页 面 的 超 链接 标签 的 格式 如 下 : 

<ahref= "目标 文件 名 .html # 记 号 名 热点 文本 < /a> 
即 单 击 “热点 文本 ”, 将 跳 转 到 目标 页 面 “ 记 号 名 ”开始 的 网 页 元 素 。 

4. 图 像 超 链 接 


图 像 也 可 作为 超 链接 热点 , 单 击 图 像 则 跳 转 到 被 链接 的 文本 或 其 他 文件 。 格 式 如 下 : 
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<a href= "URL"> < img src= "图像 文件 名 " />< /a> 
例如 ,制作 网 站 首页 图 像 的 超 链接 ,代码 如 下 : 


<a href= "index.html"> <!-- 单 击 图 像 则 打开 inasx.hbnl --> 
< jng src= "images/logo.jpg" alt=" 网 站 首页 " title=" 守 宙 电 子 " /> 
< /a> 
需要 注意 的 是 , 当 用 图 像 作 为 超 链 接 热 点 时 ,图 像 按钮 会 因为 超 链接 而 加 上 超 链接 的 


边框 ,如 图 2-21 所 示 。 














个 ] DAweb\ch2\2- 图 像 起 链接 .html 


EE DAweb\ch2\2- 图 从 把 链接 .. x | ”| 





| LuniDigutal, 宇宙 电子 


file:///D:/web/ch2/index.html 臣 100% ~ 








图 2-21 图 像 作为 超 链接 热点 时 加 上 的 边框 


去 除 图 像 超 链接 边框 的 方法 是 为 图 像 标 签 添加 样式 style 二 "border: none" ,代码 
如 下 : 


<a href= "index.html"> <!-- 单 击 图 像 则 打开 inaex-html --> 
< img src= "images/1ogo.jpg" alt=" 网 站 首页 " title=" 守 宙 电 子 " style= "border: 
none" /> 
</a> 


去 除 图 像 超 链接 边框 后 的 链接 效果 如 图 2-22 所 示 。 














局] D:\web\ch2\2- 图 你 趣 链 接 去 掉 边 框 的 效果 ,htm 凡 ~ C X 


TO 
关 DAwebYhz\2- 图 你 给 接 . x | | 





UniDi ital b 宇 宙 电 子 





file:///D:/web/ch2/index.html 


图 2-22 去 除 图 像 超 链接 边框 后 的 链接 效果 


5. 下 载 文 件 链接 


当 需 要 在 网 站 中 提供 资料 下 载 时 ,就 需要 为 资料 文件 提供 下 载 链接 。 如 果 超 链接 指 
向 的 不 是 一 个 网 页 文件 ,而 是 其 他 文件 ,如 zip、rar、mp3、exe 文件 等 , 单 击 链接 时 就 会 下 
载 相应 的 文件 。 格 式 如 下 : 
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<ahref= "文件 路 径 > 热 点 文本 </a> 


例如 ,下 载 一 个 购物 指南 的 压缩 包 文件 guide. rar, 可 以 建立 如 下 链接 。 


购物 指南 : <a hreE- "guide.rar 过 下 载 < /a> 


6. 电子 邮件 链接 


网 页 中 电子 邮件 地 址 的 链接 ,可 以 使 网 页 浏览 者 将 有 关 信 息 以 电子 邮件 的 形式 发 送 给 


<a href= "mailto: E-mail 地 址 > 热点 文本 </a> 
例如 ,E-mail 地 址 是 tiger@163. com ,可 以 建立 如 下 链接 。 


电子 邮件 : <a href= "mailto: tiger@ 163.com> 联 系 我 们 < /a> 


2.7.3 案例 一 一 制作 宇宙 电子 下 载 专 区 页 面 


电子 邮件 的 接收 者 。 通 常情 况 下 ,接收 者 的 电子 邮件 地 址 位 于 网 页 页 面 的 底部 。 当 用 户 单 
击 电子 邮件 链接 ,系统 会 自动 启动 默认 的 电子 邮件 软件 ,打开 一 个 邮件 窗口 。 格 式 如 下 : 


【 例 2-19】 制作 宇宙 电子 下 载 专区 页 面 , 本 例文 件 2-19. html 和 文件 2-19-doc. html 























在 浏览 器 中 的 显示 效果 如 图 2-23 和 图 2-24 所 示 。 












































p- cx js oveeveea 19 docreml p- cx 
| | TR 了 IE 
1 技术 文档 
市 场 营销 文档 
下 载 次 歼 ， 20 
文件 大 小 ， 19.35k 
~、 2 添加 时 间 ， 2017-L0-12 
4 下 载 
文件 名 和 有， 市 场 普 销 文档 “文件 大 3 有” 苛 
和 我 肤 系 : 主 宣 电子 下 载 专区 返回 页 项 
eV/DYwebych2/2.19 doc html FREE ET 
图 2-23 页 面 之 间 的 链接 


页 面 2-19. html 代码 如 下 : 


<html> 
<head> 
<title> 宇 宙 电 子 下 载 专区 < /title> 
< /head> 
<body> 


< img src= "images/title.jpg" align= "left" hspace= "5"/><h2> <a 


43 


Web 前 端 开发 实例 教程 一 HIM_ 5+ JavaScript + jQuery 



























































市 场 营销 文档 
下 载 次 数 ， 0 
文件 大 小 : 
祷 加 时 间 : 
1 下载 
文件 名 称 ， 市 场 党 文件 大 小 : 19.35 KB 寻 
Pi 蒜 下 吉 二 区 扳 四 是 算是 要 打开 正 是 保存 林 自 USER-20160301NM 的 guiderar (348 KE)? 
fileVW/DVwebych2/guiderar 政 100% ~ 打 FO) 保 (S| NN 取消 (OQ 
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图 2-24 下 载 文 件 链接 


name= "top"> 下 载 专区 < /a>< /h2> 
< font size= "4" color= "gray> 分 类 /标题 < /font> <br/> 
<hr size= "1" oolor= "gray"> <!-- 水 平分 隔 线 --> 
<a hre 全 "2- 19- doc.html" target= "blank"> 市 场 营销 文档 < /a> <br/> 
<a hre 会 嘎 " target=" blank"> 产 品 选 购 文档 < /a><br/> 
<a hre 会 伸 " target=" blank"> 技 术 手 册 文 档 < /a><br/> 
<a hre 全 中 "target=" blank"> 日 常 维护 文档 < /a> <br/> 
<a hre 全 中 "target=" blank"> 工 程 合 同文 档 < /a><br/> 
< /pody> 


< /htm> 
页 面 2-19-doc. html 的 代码 如 下 : 


<html> 


<head> 
<title> 下载 文档 详细 页 面 < /title> 
< /head> 
<body> 
< img src= "images/title.jpg" align= "left" hspace= "5"/><h2><a 
name= "top"> 技 术 文 档 < /a> < /hb2> 
<hr size="]" color= "gray"> <!- -水 平分 隔 线 --> 
< img src= "images/doc.jpg" align= "left" hspace= "20"/> 
< font size= "5" color= "red"> 市 场 营 销 文档 < /font><br/><br/> 
下 载 次 数 : snpbsp; sribsp; snbsp; snbsp;< fcnt size= "3" color= "gray"> 20< /font> 
<br/><br/> 
文件 大 小 : gnbsp; grbsp; snbsp; snbsp;< fcnt size= "3" color= "gray"> 19.33 k 
</font><br/><br/> 
添加 时 间 : gnibsp; &nbsp; snbsp; &nbsp; 
< font size= "3" color= "gray"> 2017- 10- 12< /font> <br/> <br/><br/><br/> 
<br/><br/><br/><br/> 
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< img src= "images/title.jpg" align= "left" hspace= "5"/> 

<h2> <a name= "top> 下 载 </a>< /hb2> 

<hr size= ml" color= "gray"> < 上 -水 平分 隔 线 --> 

< font size= "3" color= "gray> 文 件 名 称 : 市 场 营 销 文档 gnibsp; gnbsp; 文 件 大 小 : 
19.33 KBE< /font> gnbsp; gribsp; snbsp; grbsp;< a href—= "guide.rar"> 下 载 </a> 

<br/><br/> 

和 我 联系 : <a hreE- "mailto: tigere 163.com> 宇宙 电子 下 载 专区 < /a> gnbsp; 
&nbspy<a hre 伟 只 top> 返 回 页 顶 < /a> 

< /body> 

< /html> 

【说 明 】 

(1) 在 下 载 专区 页 面 中 ,将 鼠标 指针 移动 到 下 载 文档 的 超 链接 时 ,鼠标 指针 变 为 手 
形 , 单 击 文档 标题 链接 则 打开 指定 的 网 页 2-19-doc. html。 如 果 在 二 a 二 标签 中 省 略 属性 
target, 则 在 当前 窗口 中 显示 。 当 target 一 ”blank" 时 ,将 在 新 的 浏览 器 窗口 中 显示 。 

(2) 在 文档 详细 页 面 中 单 击 下 载 热点 “下 载 ”, 将 打开 下 载 文件 对 话 框 。 单 击 “ 保 存 ” 
按钮 ,将 该 文件 下 载 到 指定 位 置 。 


28 <dw 标 答 


前 面 讲解 的 几 类 标签 一 般 用 于 组 织 小 区 块 的 内 容 , 为 了 方便 管理 ,许多 小 区 块 还 需要 
放 到 一 个 大 区 块 中 进行 布局 。div 的 英文 全 称 为 division , 意 为 “区 分 ”。 一 div 二 标签 是 一 
个 块 级 元 素 , 用 来 为 HTML 文档 中 大 块 内 容 提供 结构 和 背景 , 它 可 以 把 文档 分 割 为 独立 
的 .不 同 的 部 分 ,其 中 的 内 容 可 以 是 任何 HTML 元 素 。 

如 果 有 多 个 二 div 二 标签 把 文档 分 成 多 个 部 分 ,可 以 使 用 id 或 class 属性 来 区 分 不 同 
的 二 div 之 。 由 于 过 div 之 标签 没有 明显 的 外 观 效果 ,所 以 需要 为 其 添加 CSS 样式 属性 , 才 
能 看 到 区 块 的 外 观 效 果 。 二 div 二 标签 的 格式 如 下 : 


<div align= "left|oenter|right"> HIML 元 素 < /div> 


其 中 ,属性 align 用 来 设置 文本 块 文字 段 或 标题 在 网 页 上 的 对 齐 方 式 , 取 值 为 left、center 
和 right, 默 认为 left。 





29 <spam> 标 签 


过 div 之 标签 主要 用 来 定义 网 页 上 的 区 域 , 通 常用 于 较 大 范围 的 设置 ,而 所 span 之 标 
签 被 用 来 组 合 文档 中 的 行 级 元 素 。 





2.9.1 基本 语法 





去 span 盖 标签 用 来 定义 文档 中 一 行 的 一 部 分 ,是 行 级 元 素 。 行 级 元 素 没有 固定 的 宽 
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度 ,根据 过 span 盖 元 素 的 内 容 决定 。 过 span 盖 元 素 的 内 容 主要 是 文本 ,其 语法 格式 如 下 : 
<spar> 内 容 < /span> 
例如 ,显示 新 闻 的 发 布 日 期 ,特意 将 日 期 一 行 中 的 日 期 数字 设置 为 深 红色 显示 ,以 吸 
引 浏 览 者 的 注意 ,如 图 2-25 所 示 。 
新 闻 动态 更 全 新闻 


2017-10-13 
手 军 电子 有 限 公司 获得 开封 开发 区 百 强 企业 填 舍 称号 











图 2-25 范围 标签 二 span 盖 


代码 如 下 : 
< span style= "color: #e5314f;"> 2017- 10- 13< /span> 


其 中 ,二 span 二 ..…. 王 /span 之 标签 限定 页 面 中 某 个 范围 的 局 部 信息 , style 一 "color: 井 
e5314f;" 用 于 为 范围 添加 突出 显示 的 样式 ( 深 红色 )。 


2.9.2 一 span 之 与 <<div 之 的 区 别 


所 span 二 与 一 div 之 在 网 页 上 的 使 用 ,都 可 以 用 来 产生 区 域 范 围 , 以 定义 不 同 的 文字 
段落 , 且 区 域 间 彼此 是 独立 的 。 两 者 在 使 用 上 还 是 有 一 些 差异 。 


1. 区 域内 是 否 换行 


二 div 二 标签 区 域内 的 对 象 与 区 域外 的 上 下 文 会 自动 换行 ,而 二 span 二 标签 区 域内 的 
对 象 与 区 域外 的 对 象 不 会 自动 换行 。 


2. 标签 相互 包含 


二 div 记 与 二 span 记 标签 区 域 可 以 同时 在 网 页 上 使 用 。 一 般 在 使 用 上 建议 用 二 div 二 
标签 包含 二 span 二 标签 。 但 二 span 二 标签 最 好 不 包含 二 div 二 标签 ,否则 会 造成 二 span 二 
标签 的 区 域 不 完整 ,形成 断 行 的 现象 。 


2.9.3 ”使 用 过 div 之 标签 和 <span 之 标签 布局 网 页 内 容 


本 小 节 通 过 一 个 综合 的 案例 讲解 如 何 使 用 二 div 二 标签 和 过 span 二 标签 布局 网 页 内 
容 , 包 括 文本 水平线、 列表 .图像 和 链接 等 常见 的 网 页 元 素 。 

【 例 2-20】 使 用 二 div 之 标签 和 过 span 之 标签 布局 网 页 内 容 , 通 过 为 二 div 之 标签 添 
加 style 样式 设置 分 区 的 宽度 .高度 及 背景 色 区 块 的 外 观 效果 。 本 例文 件 2-20. html 在 浏 
览 器 中 显示 的 效果 如 图 2-26 所 示 。 

代码 如 下 : 
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司 DA\web\ch2\2-20.html 有 -cx 攻 芭 7 
馈 使 用 <div> 慰 签 和 <span> 标 ..X 


会 员 注册 步 又 
































1. 盾 写 会 员 信息 请 填写 您 的 个 人 信息 》 

2. 接收 电子 邮件 (商城 将 向 您 发 送 电子 邮件 ) 

3， 激 活 会 员 账号 〈 请 您 打开 邮件 ， 激 活 会 员 账 号 ) 

4 注册 成 功 〈 会 员 注册 成 功 ， 欢 迎 您 成 为 我 们 的 一 员 ) 


UniDigital 宇宙 电子 “9 Fs 





中 100% ~ 








图 2-26 使 用 二 div 二 标签 和 二 span 二 标签 布局 网 页 内 容 


< !goctype html> 
<html> 
<head> 
<meta charset= "gb2312"> 
<title> 使 用 < div> 标 签 和 < span> 标 签 布 局 网 页 内 容 < /title> 
< /head> 
<body> 
<div style= "width: 720px; height: 170px; background: # dd"> 
<h2 align= "center"> 会 员 注 册 步 又 < /h2> 
<hr/> 
<ol type= "1"> < 上 -列表 样式 为 数字 --> 
<1i> 填 写 会 员 信息 (请 填写 您 的 个 人 信息 ) 
<1i> 接 收 电子 邮件 们 城 将 向 您 发 送 电 子 邮 件 ) 
<1i> 激 活 会 员 账号 (请 您 打开 邮件 ,激活 会 员 账 号 ) 
<1i> 注 册 成 功 会 员 注 册 成 功 ,欢迎 您 成 为 我 们 的 一 员 ) 
</o> 
</div> 
< div style= "width: 718px;height: 56px;border: lpx solid #£96"> 
< span> < img src= "images/logo.jpg" aligr= "middle"/> gnbsp; gnbsp; 版 权 
&copy; 2017 宇宙 电子 < /span> 
</div> 
< [body> 
</htm> 


【说 明 】 

(1) 本 例 中 设置 了 两 个 二 div 之 分 区 : 内 容 分 区 和 版 权 分 区 。 

(2) 内 容 分 区 二 div 二 标签 的 样式 为 style 王 "width: 720px; height: 170px; 
background: # ddd" ,表示 分 区 的 宽度 为 720px、 高 度 为 170px 及 背景 色 为 浅 灰 色 。 

(3) 版 权 分 区 二 div 二 标签 的 样式 为 style 二 "width:718px; height:56px; border: 1px 
solid #f96" ,表示 分 区 的 宽度 为 718px、 高 度 为 56px 及 边框 为 1px 的 橘红 色 实 线 。 

(4) 版 权 分 区 中 的 二 span 二 标签 中 组 织 的 内 容 包 括 图 像 .文本 两 种 行 级 元 素 。 
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习 是 


1. 使 用 段落 与 文字 的 基本 排版 技术 制作 如 图 2-27 所 示 的 页 面 。 








国 DAwebvchz 习 是 vd2-Lhtml Pp - cx 上 二 


侣 3 至 x | 




















Web 标 准 与 理念 
早 在 2005 年 Web 标 准 就 在 国内 悄然 流行 起 来 ， 当 网 丰 论 计 和 制作 人 员 天 娩 轩 新 审视 以 前 制作 的 
| 网 页 时 ， 突 然 间 发 现 页 面 中 充斥 着 大 量 说 套 的 表格 和 腑 肿 的 代码 ， 难 以 修改 。 于 是 一 场 基于 
| nb 本 人 的 清理 二 打响 了 ， 从 此 众多 网 页 开发 人 员 开始 认真 学 习 Web 标 准 ， 各 大 门户 网 站 也 
| 纷纷 进行 网 站 重 构 。 
| 1, Web 标 准 是 什么 
Web 标 准 〔Web Standards) 即 网 站 标准 ， 它 并 非 是 某 一 个 标准 ， 而 是 一 系列 标准 的 集合 。 
| (1) 结构 标准 语言 
(2) 表现 标准 语言 
| (3) 行为 标准 
| 2, 结构 和 表现 相 分 离 


| _XHTML 的 标签 只 用 来 定义 文档 的 结构 ， 所 有 涉及 表现 的 东西 通通 剥离 出 来 ， 把 它 放 到 一 个 
| 单独 的 文件 里 ， 这 个 单独 的 文件 就 是 CSS。 





成 100%6 ~ 














图 2-27 题 1 图 


2. 使 用 图 文 混 排 技术 制作 如 图 2-28 所 示 的 宇宙 电子 公司 简介 页 面 。 











|] pswebwhz\ 习 题 wt2-2.html PCcx 卫 汪汪 2 


公司 简介 


宇宙 微 电 子 封装 测试 基地 启动 于 2001 年 ， 是 一 家 专业 从 事 半 导 
体 功率 器 件 和 其 他 电子 产品 封装 的 优秀 供应 商 。 工 厂 具备 从 美国 、 
德国 、 日 本 等 国际 和 地 区 原装 进口 的 世界 一 流 的 生产 设备 和 测试 仪 
器 ， 主 要 封装 形式 有 T0-277、T0-92、T0-126、T0-251、T0-252、 
T0-220、T0-220F 、T0-3P 等 。 


















工厂 严格 实行 1S0 9001、ISO 14001 和 TS 16949 管 理 体系 , 产品 符 
认证 、REACH 环 保 要 求 。 主 营 产品 有 肖 特 基 一 极 管 ， 快 恢 
三 极 管 、 可 控 硅 、 场 效应 管 、 桥 堆 、 i 和 


流 
等 行业 。 产 品 的 各 项 国内 外 0 
在 国内 外 电源 、 和 


电子 采用 标准 化 和 定制 化 服务 相 结合 的 经 营 模式 ， 以 高 品 | 





质 的 产品 为 立足 点 ， 以 技术 服务 于 市 场 为 导向 ， 六 的 让 抽身 动 
化 生产 和 测试 装备 为 保障 ， 以 科学 规范 的 务实 高 效 的 决 

朝气 乏 勃 的 高 素质 员工 团队 为 依托 ， 和 
加 产 服务 和 品质 保证 。 














忆 100% ~ 








图 2-28 题 2 图 
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3. 使 用 锚 点 链接 和 电子 邮件 链接 制作 如 图 2-29 所 示 的 网 页 


























5 E 
ENwebvch2N 习 是 wdt2-3.html prox) eo 
唐诗 宋词 赏析 i 
静夜 思 赏析 
诗人 简介 ， 李白 的 诗歌 以 豪迈 的 气魄 歌唱 自己 的 进步 思想 ， 插 击 权贵 
如 人 A 从 艺 ; 振作 是 
用 大 胆 的 寺 张 和 深入 浅 出 的 语言， 形成 替 记 夹 朗 的 
六 义 诗歌 的 杰出 代表 。 
poy 赏析 | 


诗人 简介 ， 村 种 栓 局 是 人; 也 就 是 现在 的 江苏 镇 江 。 虽 出 身 微 贱 ， 
儿 有 赢 天 地 之 灵秀 ， 出 落得 美 慧 无 双 


人 合格 汪 南 上 女 的 天 多 ， Ee 






























4. 使 用 肉 套 列表 制作 如 图 2-30 


和 要， 其 至 于 会 与 竺 填词 作曲 ， 首 风 放 了 江南 一 带 。 
广 美 人 赏析 
诗人 简介 ， 条 978), en ， 汉 族 ， 在 位 时 间 961 一 
oo 国 让 了 时 
加 天 时候 全 人 
邮件 联系 El 
胞 100%6 > 
图 2-29 题 3 图 


所 示 的 宇宙 电子 公司 名 片 页 面 。 











宗旨 


> 质量 第 一 
2 诚信 为 本 
5 开拓 进取 


5 客户 至 上 





首开 后 商 加 ! 区 和 | 机 发 布 项 目 首选 字 亩 电子 , 无 须 东 奔 西 跑 , 只 要 给 项 目 
留言 ,获取 免费 创业 培训 基金 ! 多 留言 ,多 比较 , 创业 作成 功 ! 加 
人 
W 
宇宙 电子 为 个 人 提供 的 企业 职位 人 才 操 聘 、 歼 夭 、 二 训 、 宰 评 和 
en EH 
宇宙 平台 
技术 支持 
， 宇 害 技 术 导 务 部 已 经 成 为 宇 寡 务 不 可 分 训 的 一 侣 分 也 成 为 公司 企业 形象 的 重要 组 成 部 分。 


。 字 宙 商 务 提供 的 技术 支持 不 仅仅 解 ; 
， 宇宙 商务 的 形象 ， 隧 着 品牌 的 不 断 深入 人 心 和 口碑 相传 ， 最 后 达成 服务 与 品牌 的 完美 结合 。 


雇 客 户 的 技术 问题 . 更 重 间 的 是 在 客户 的 心中 建立 起 企业 的 形象 、 











起 100% v 








2-30 题 4 图 
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|EE 3EE | 
全 | paweb\cha a2-5 html DP-oxln 
[em | 
项 目 简介 
宇宙 电子 着 眼 于 市 场 未 来 发 展 趋 势 ， 以 互联 网 为 基础 ， 以 商务 网 站 为 服务 平台 
以 企业 客户 为 服务 对 象 ， 避 i 


以 电子 商务 形式 进行 的 区 域 性 企业 闻 商 业 活动 的 优质 项 目 ， 
项 目 优势 
中 原 自 贸 区 是 全 国 各 类 商品 销 往 中 部 六 省 及 周边 各 省 的 唯一 展示 窗口 和 商品 集散 

地 ， 又 是 高 科技 基地 ， 拥 有 良好 的 电子 商务 实施 基础 。 

。 个 性 化 电子 商务 系统 

。 大 型 商用 数据 库 

。ERP 企 业 管理 系统 

。 科研 开发 与 创新 

















图 2-31 题 5 图 


第 3 章 HIVL5 页 面 的 布局 与 交互 


网 页 的 布局 是 指 对 网 页 上 元 素 的 位 置 进行 合理 的 安排 ,一 个 具有 好 的 布局 的 网 页 , 往 
往 给 浏览 者 带 来 赏心悦目 的 感受 。 表 单 是 网 站 管理 者 与 访问 者 之 间 进 行 信息 交流 的 桥 
梁 , 利 用 表单 可 以 收集 用 户 意 见 ,做 出 科学 决策 。 前 面 讲解 了 网 页 的 基本 排版 方法 ,并 未 
涉及 元 素 的 布局 与 页 面 交 互 , 本 音 将 重点 讲解 使 用 HTML 标签 布局 页 面 及 实现 页 面 交 
互 的 方法 。 








31 使 用 结构 元 素 构建 网 页 布局 


HTML 5 可 以 使 用 结构 元 素 构建 网 页 布局 ,使 Web 设计 和 开发 变 得 容易 起 来 。 
HTML 5 提供 了 各 种 切割 和 划分 页 面 的 手段 ,允许 用 户 创建 的 切割 组 件 不 仅 能 用 来 逻辑 
地 组 织 站 点 ,而 且 能 够 赋予 网 站 聚合 的 能 力 。HTML 5 是 “信息 到 网 站 设计 的 映射 方 
法 ”, 因 为 它 体 现 了 信息 映射 的 本 质 ,划分 信息 ,并 给 信息 加 上 标签 ,使 其 变 得 容易 使 用 和 
理解 。 

在 HTML 5 中 ,为 了 使 文档 的 结构 更 加 清晰 明确 ,使 用 文档 结构 元 素 构建 网 页 布局 。 
HTML 5 中 的 主要 文档 结构 元 素 如 下 。 

所 section 二 标签: 代表 文档 中 的 一 段 或 者 一 节 。 

过 nav 过 标签: 用 于 构建 导航 。 

所 header 之 标签 : 页 面 的 页 眉 。 

二 footer 志 标签: 页 面 的 页 脚 。 

到 article 盖 标签 : 表示 文档 、 页 面 ,应 用 程序 或 网 站 中 一 体 化 的 内 容 。 

二 aside 二 标签 : 代表 与 页 面 内 容 相关 、 有 别 于 主要 内 容 的 部 分 。 

二 hgroup 二 标签 : 代表 段 或 者 节 的 标题 。 

二 time 志 标签: 表示 日 期 和 时 间 。 

二 mark 二 标签 : 文档 中 需要 突出 的 文字 。 

使 用 结构 元 素 构建 网 页 布局 的 典型 布局 如 图 3-1 所 示 。 


| 呈 前 端 开发 实例 教程 一 HM_5+ JavaScript + jQuery 





<header> 


<article> 


<aside> 


<section> 


<footer> 


图 3-1 使 用 结构 元 素 构建 网 页 布局 





3.1.1 二 section 之 标签 


二 section 志 标签 用 来 定义 文档 中 的 节 (section、 区 段 ) ,比如 章节 、 页 眉 、 页 脚 或 文档 中 
的 其 他 部 分 。 例 如 ,下 面 的 代码 定义 了 文档 中 的 区 段 ,解释 了 PRC 的 含义 。 
< section> 
<hl> FRC< /hl> 


< 户 中 华人 民 共 和 国 成 立 于 1949 年 < /p> 
< /section> 


3.1.2 二 nav 之 标签 


<nav 二 标签 用 来 定义 导航 链接 的 部 分 。 例 如 ,下 面 的 代码 定义 了 导航 条 中 常见 的 首 
页 、 上 一 页 和 下 一 页 链接 。 
<nav> 
<a hre 人 "index.html"> 首 页 < /a> 
<a hre 全 "prev.html"> 上 一 页 < /a> 
<a hre 人 - "next.htm"> 下 一 页 < /a> 
< /nav> 


3.1.3 二 header 之 标签 


到 header> 标 签 用 来 定义 文档 的 页 眉 。 例 如 ,下 面 的 代码 定义 了 文档 的 欢迎 信息 。 
< header> 

<hl> 欢 迎 光 临 我 的 主页 < /hi> 

< 他 我 的 名 字 是 家 春秋 < /p> 
< /header> 
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3.1.4 二 footer 之 标签 


过 footer 二 标签 用 来 定义 section 或 document 的 页 脚 ,通常 该 标签 包含 网 站 的 版 权 、 
创作 者 的 姓名 文档 的 创作 日 期 及 联系 信息 。 例 如 ,下 面 的 代码 定义 了 网 站 的 版 权 信息 。 
< footer> 


< Pr Copyright gcopy; 2017 宇宙 电子 版 权 所 有 < /p> 
< /footer> 


3.1.5 二 article 之 标签 


二 article 二 标签 用 来 定义 独立 的 内 容 , 该 标签 定义 的 内 容 可 独立 于 页 面 中 的 其 他 内 
容 使 用 。 二 article 二 标签 经 常用 于 论坛 帖子 ,新闻 文章 ,博客 条 目 和 用 户 评论 等 应 用 中 。 

一 section 二 标签 可 以 包含 二 article 二 标签 ,一 article 二 标签 也 可 以 包含 二 section 二 标 
签 。 志 section 之 标签 用 来 分 组 相 类 似 的 信息 ,而 过 article 之 标签 则 用 来 放置 诸如 一 篇 文 
章 或 是 博客 一 类 的 信息 ,这 些 内 容 可 在 不 影响 内 容 含义 的 情况 下 被 删除 或 是 被 放置 到 新 
的 上 下 文中 。 到 article 之 标签 提供 了 一 个 完整 的 信息 包 。 相 比 之 下 ,< 王 section 之 标签 包 
含 的 是 有 关联 的 信息 ,但 这 些 信息 自身 不 能 被 放置 到 不 同 的 上 下 文中 ,和 否则 其 代表 的 含义 
就 会 丢失 。 

除了 内 容 部 分 ,一 个 二 article 二 标签 通常 有 它 自己 的 标题 (一 般 放 在 二 header 记 标签 
中 ), 有 时 还 有 自己 的 脚注 。 

【 例 3-1】 使 用 二 article 二 标签 定义 新 闻 内 容 , 本 例文 件 3-1. html 在 浏览 器 中 的 显示 


效果 如 图 3-2 所 示 。 
和 DA\web\ch3\3-1.html pr-roxBmoo 
司 aricle 标 等 示 例 X 


宇宙 电子 产品 发 布 

发 布 日 期 :2017/10/01 

国庆 节 来 临 之 际 ， 宇 宙 电 子 将 发 布 第 四 季度 …… (文章 正文 ) 
Copyright 2017 宇宙 电子 版 权 所 有 






































中 100% ~ 
图 3-2 例 3-1 的 页 面 显 示 效 果 


代码 如 下 : 


<htm> 
<head> 
< meta charset= "gb2312"> 
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< /head> 


<hl> 宇 宙 电 子 产 品 发 布 < /hi> 
<p> 发 布 日 期 : 2017/10/01< /p> 
< /header> 
<E><b> 国 庆 节 来 临 之 际 < /b> ,宇宙 电子 将 发 布 第 四 季度 …… 文章 正文 )< /p> 
< footer> 
<p> Copyright goopy; 2017 宇宙 电子 版 权 所 有 < /p> 
< /footer> 
</article> 
< /oody> 

</htm> 

【说 明 】 这 个 示例 讲述 的 是 使 用 二 article 二 标签 定义 新 闻 的 方法 。 在 二 header 二 标 
签 中 典 和 人 了 新 闻 的 标题 部 分 ,标题 “宇宙 电子 产品 发 布 ” 被 嵌入 过 hl 二 标签 中 ,新 闻 的 发 
布 日 期 被 徐 入 过 p 二 标签 中 ;在 标题 部 分 下 面 的 一 p 二 标签 中 ,嵌入 了 新 闻 的 正文 :在 结尾 
处 的 二 footer 盖 标签 中 嵌入 了 新 闻 的 版 权 , 作 为 脚注 。 整 个 示例 的 内 容 相 对 比较 独立 、 完 
整 ,因此 ,对 这 部 分 内 容 使 用 了 二 article 二 标签 。 

过 article 记 标签 是 可 以 酝 套 使 用 的 ,原则 上 内 层 的 内 容 需要 与 外 层 的 内 容 相关 联 。 
例如 ,针对 该 新 闻 的 评论 就 可 以 使 用 舱 套 过 article 二 标签 的 方法 实现 ;用 来 呈现 评论 的 
二 article 志 标签 被 包含 在 表示 整体 内 容 的 二 article 二 标签 中 。 

【 例 3-2】 使 用 嵌 套 的 二 article 二 标签 定义 新 闻 内 容 及 评论 ,本 例文 件 3-2. html 在 浏 
览 器 中 的 显示 效果 如 图 3-3 所 示 。 














宇宙 电子 产品 发 布 


发 布 日 期 :2017/10/01 
国庆 节 来 临 之 际 ， 宇 宙 电 子 将 发 布 第 四 季度 …… (文章 正文 ) 


评论 


发 表 者 : 王 小 虎 

2 小 时 前 

我 更 喜欢 D2C2 系 列 ， 性 价 比 更 高 。 

发 表 者 : 赵 小 帅 

3 小 时 前 

我 喜欢 宇宙 电子 公司 生产 的 机 器 人 ， 我 最 喜爱 的 系列 是 R2C2。 





中 100% ~ 


图 3-3 例 3-2 的 页 面 显示 效果 
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代码 如 下 : 


<htm> 
<head> 
<meta charset= "go?312"> 
<title> 幅 套 定义 article 标 签 示 例 < /title> 
< /head> 


<hl> 宇 宙 电 子 产 品 发 布 < /hl> 
<g 户 发 布 日 期 : 2017/10/01< /p> 
< /header> 
<E><ktz 国 庆 节 来 临 之 际 < /b> ,宇宙 电子 将 发 布 第 四 季度 …… 文章 正文 )< /p> 
< section> 
<h2> 评 论 < /> 
<article> 
<header> 
<h3> 发 表 者 : 王 小 虎 < /h3> 
<g 访 2 小 时 前 < /E> 
< /header> 
< 了 全 我 更 喜欢 D2c2 系列 ,性 价 比 更 高 。< /p> 
</article> 
<article> 
< header> 
<h3> 发 表 者 : 赵 小 帅 < /h3> 
< 户 3 小 时 前 < /E> 
< /header> 
< 户 我 喜欢 宇宙 电子 公司 生产 的 机 器 人 ,我 最 喜爱 的 系列 是 RRC2。< /p> 
< /article> 
< /section> 
< /article> 
< /pody> 
< /htm> 
【说 明 】 
(1) 这 个 示例 比例 3-1 的 内 容 更 加 完整 ,由 于 添加 了 新 闻 的 评论 内 容 , 示 例 的 整体 内 


容 更 加 独立 、 完 整 ,因此 使 用 二 article 二 标签 。 其 中 ,示例 的 内 容 又 分 为 几 个 部 分 ,新 闻 的 
标题 放 在 了 二 header 二 标签 中 ,新 闻 正 文 放 在 了 二 header 二 标签 后 面 的 二 p 二 标签 中 , 然 
后 二 section 二 标签 把 正文 与 评论 部 分 进行 了 区 分 .在 二 section 二 标签 中 容 入 了 评论 的 内 
容 ,在 评论 中 的 二 article 志 标签 中 又 可 以 分 为 标题 与 评论 内 容 部 分 ,分 别 放 在 二 header 二 
标签 和 二 p 二 标签 中 。 


(2) 在 HTML 5 中 ,过 article 二 标签 可 以 看 作 一 种 特殊 的 二 section 二 标签 , 它 比 


二 section 记 标签 更 强调 独立 性 。 即 二 section 二 标签 强调 分 段 或 分 块 ,而 二 article 二 标签 
强调 独立 性 。 具 体 来 说 ,如 果 一 块 内 容 相对 来 说 比较 独立 完整 时 ,应 使 用 二 article 二 标 
签 ; 但 是 如 果 用 户 需 要 将 一 块 内 容 分 成 几 段 时 ,应 该 使 用 二 section 二 标签 。 另 外 ,用 户 不 
要 在 没有 标题 的 内 容 区 块 使 用 一 section 之 标签 。 
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3.1.6 二 aside 之 标签 


过 aside 二 标签 用 来 表示 当前 页 面 或 新 闻 的 附属 信息 部 分 , 它 可 以 包含 与 当前 页 面 或 
主要 内 容 相关 的 引用 、 侧 边栏 .广告 .导航 条 ,以 及 其 他 于 ===* 





















































类 似 的 有 别 于 主要 内 容 的 部 分 。 nn 
【 例 3-3】 使 用 二 aside 二 标签 定义 了 网 页 的 侧 边 ||@ mao 
栏 信息 ,本 例文 件 3-3. html 在 浏览 器 中 的 显示 效果 如 | 、、 
本 评论 
图 3-4 所 示 。 
代码 如 下 :于 
顶 ， 和 拜读 一 下 老兄 的 文章 
I 了 
<head> 
< meta charset= "gb2312"> 下 100% > 
ea 图 3-4 例 3-3 的 页 面 显示 效果 
<body> 
<aside> 
<nav> 
<h> 评 论 < /ho> 
<U> 
<1i><a href- "http: //blog.sina.com.cn/1683"> 王 小 虎 < /a> 12- 24 
14: 25< /1i> 
<1i><a href- "http: //blog.sina.com.cn/u/1345"> 赵 小 帅 < /a> 12- 22 
23: 48<br/> 
<a href= "http: //blog.sina.com.cn/s/1256"> 项, 拜读 一 下 老兄 的 文章 < /a> 
</lLi> 
<1li> 
<a href= "http: //blog.sina.om.aYw/1259295385"> 新 浪 官 博 < /a> 
09- 18 08: 50<br/> 
<ahre 人 只 喧 蕉 喜 ! 您 已 经 成 功 开通 了 博客 < /a> 
< /li> 
</al> 
< /nav> 
< /aside> 
< /pody> 
< /htm> 


【说 明 】 本 例 为 一 个 典型 的 博客 网 站 中 的 侧 边栏 部 分 ,因此 放 在 二 aside 二 标签 中 ; 
该 侧 边 栏 又 包含 具有 导航 作用 的 链接 ,因此 放 在 二 nav 二 标签 中 ; 侧 边栏 的 标题 是 “评论 ”， 
放 在 二 h2 二 标签 中 ;在 标题 之 后 使 用 一 个 无 序列 表 二 ul 二 标签 ,用 来 存放 具体 的 导航 
链接 。 
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3.1.7 分 组 元 素 


分 组 元 素 用 于 对 页 面 中 的 内 容 进 行 分 组 。HTML 5 中 包含 3 个 分 组 元 素 , 分 别 是 
figure 元 素 ,figcaption 元 素 和 hgroup 元 素 。 


1. figure 元 素 和 figcaption 元 素 


figure 元 素 用 于 定义 独立 的 流 内 容 ( 图 像 、 图 表 、 照 片 、 代 码 等 ) ,一 般 是 指 一 个 单独 的 
单元 。figure 元 素 的 内 容 应 与 主 内 容 相 关 , 但 如 果 被 删除 ,也 不 会 对 文档 流产 生 影响 。 
figcaption 元 素 用 于 为 figure 元 素 组 添加 标题 ,一 个 figure 元素 内 最 多 允许 使 用 一 
figcaption 元 素 ,该 元 素 应 放 在 figure 元 素 的 第 一 个 或 者 最 后 一 个 子 元 素 的 位 置 。 

【 例 3-4】 使 用 figure 元 素 和 figcaption 元 素 分 组 页 面 内 容 , 本 例文 件 3-4. html 在 浏 
览 器 中 的 显示 效果 如 图 3-5 所 示 。 























[ed 
DP-eox)n 




















|) DAweb\ch3\3-4.html 
确 fgurefnfigcaption 元 素 示例 x | 


宇宙 电子 采用 标准 化 和 定制 们 眼 乞 相 结 合 的 经 营 模式 ， 
质 的 产品 为 立足 点 ， 以 技术 服务 于 市 场 为 导向 ， 











以 高 品 

力 窒 户 提供 折线 的 放生 品 生产 服务 和 品 贷 保 记 。 
宇宙 电子 公司 总 部 
编辑 ， 王 小 虎 时 间 ，2017 年 10 月 





肥 100% ~ 





图 3-5 例 3-4 的 页 面 显示 效果 


代码 如 下 : 


< !doctype html> 
<html> 
< head> 
<meta charset= "go2312"> 
<title> figure 和 figcaption 元 素 示 例 < /title> 


< /head> 

< body> 
< 上 宇宙 电子 采用 标准 化 和 定制 化 …… 此 处 省 略 文字 )< /p> 
<figure> 


<figcaption> 宇 宙 电 子 公司 总 部 < /figcaption> 
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< 了 > 编辑 : 王 小 虎 时 间 : 2017 年 10 月 < /p> 
< img src= "images/com. jpg"> 


【说 明 】 figcaption 元 素 用 于 定义 文章 的 标题 。 
2. hgroup 元 素 


hgroup 元 素 用 于 将 多 个 标题 ( 主 标题 和 副标题 或 者 子 标题 ) 组 成 一 个 标题 组 ,通常 将 
它 与 hl 一 h6 元 素 组 合 使 用 。 一 般 将 hgroup 元 素 放 在 header 元 素 中 。 

在 使 用 hgroup 元 素 时 要 注意 以 下 几 点 。 

。 当 只 有 一 个 标题 元 素 时 不 建议 使 用 hgroup 元 素 。 

。 当 出 现 一 个 或 者 一 个 以 上 的 标题 与 元 素 时 ,推荐 使 用 hgroup 元 素 作 为 标题 元 素 。 

。 当 一 个 标题 包含 副标题 ,section 或 者 article 元 素 时 ,建议 将 hgroup 元 素 和 标题 

相关 元 素 存放 到 header 元 素 容 器 中 。 

【 例 3-5】 使 用 hgroup 元 素 分 组 页 面 内 容 , 本 例文 件 3-5. html 在 浏览 器 中 的 显示 效 
果 如 图 3-6 所 示 。 

代码 如 下 : 

<html> 


| pxwebvchas-5ht P - OX 
<head> 个 hgroup 元 素 示例 x 


<meta charset= "gb2312"> 
<title> hgroup 元 素 示例 < /title> 宇宙 电子 网 站 
< /head> 
sna 字 宙 电子 新 闻 中 心 
<header> 
<hgroup> 宇宙 电子 产品 发 布 
<hl> 宇 宙 电 子 网 站 < /hl> 
<h2> 宇 宙 电 子 新 闻 中 心 < /h2> 
< /hgroup> 
< 了 全 宇宙 电子 产品 发 布 < /p> 图 3-6 例 3-5 的 页 面 显 示 效 果 
< /header> 
< /body> 
</htm> 























3.1.8 案例 一 一 制作 宇宙 电子 新 品 发 布 页 面 


【 例 3-6】 使 用 结构 元 素 构建 网 页 布局 ,制作 宇宙 电子 新 品 发 布 页 面 ,本 例文 件 3-6. 
html 在 浏览 器 中 的 显示 效果 如 图 3-7 所 示 。 
代码 如 下 : 


<html> 
<head> 
<meta charset— "gb2312"> 
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Se 国 iwebeh3 ahem p- ox 
Er 


UniDigital 宇宙 电子 





























产品 系列 


机 器 人 系列 
智能 家 居 系 列 
白色 家 电 系 列 


新 品 发 布 
2017 年 10 月 8 日 ，R2C2 系 列 机 器 人 进入 我 们 的 生活 
< 


基本 信息 
R2C2 系 列 机 器 人 可 以 接受 人 类 指挥 ， 下 全 和 也 可 以 根据 以 人 工 智能 技术 制定 的 原则 纲领 行动 。 它 的 任务 是 协助 或 取代 人 类 
工作 的 工作 ， 例 如 生产 业 、 建 筑 业 ， 或 是 邹 险 的 工作 。 


控 和 站 统 


RoC2 系 列 机 器 人 采用 多 台 微机 来 分 担 机 器 人 的 控制 ， 如 当 条 用 上 、 下 两 级 微机 共同 完成 机 器 入 的 控制 时 ， 主机 信用 于 负责 系 统 的 这 理 、 通讯 、 运 
动 学 和 动力 学 计算 ， 并 向 下 级 党 机 发 送 指 邻 信息， 作为 下 级 从 机 ， 各 关节 分 别 对 应 一 个 CEU， 进 行 揪 补 运算 和 何 服 控 制 处 理 a 
并 向 主机 反馈 信息 。 根 据 作业 任务 要 求 的 不 同 ， 机 器 人 的 控制 方式 又 可 分 为 点 位 控制 、 连 续 轨 迹 控制 和 力 ( 力 和 矩 】 控制 。 


Copyrisht © 2017 宇宙 电子 版 权 所 有 

















图 3-7 例 3-6 的 页 面 显示 效果 


<title> 使 用 结构 元 素 构建 网 页 布局 < /title> 
< head> 
<body> 
<article jdF "main"> 
<header> 
<p align= "center"> < img src= "images/l0go.jpg"/>< /E> 
< /header> 
<aside> 
<h3> 产 品系 列 < /h3> 
< section> 
<table> 
<tr><t 中 机 器 人 系列 </td>< /tr> 
<tr><t 中 智能 家 居 系 列 </td> < /tr> 
<tr><t 中 白色 家 电 系 列 </td>< /tr> 
< /table> 
< /section> 
< /aside> 
< section> 
< header> 
<homroup> 
<h> 新 品 发 布 < /hi> 
<h3> 2017 年 10 月 8 日 ,F2c2 系 列 机 器 人 进入 我 们 的 生活 < /h3> 
< /hgroup> 
< /header> 
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< Section> 
< img src= "images/r2c2.jpg" width= "200" /> 
< /section> 
<article> 
<spar> 基 本 信息 < /span> 
<hr/> 
<P>F2c2 系 列 机 器 人 可 以 接受 人 类 指挥 ,又 可 以 …… 此 处 省 略 文字 )< /p> 
< /article> 
<article> 
<span> 控 制 系统 < /span> 
<hr/> 
<p>R2C2 系列 机 器 人 采用 多 台 微 机 来 分 担 机 器 人 …… 此 处 省 略 文字 )< /p> 
< /article> 
< /section> 
< footer> 
<p align= "oenter"> Copyright goopy; 2017 宇宙 电子 版 权 所 有 < /p> 
< /footer> 
</article> 
< /pody> 
< /htm> 


32 页 面 交 互 元 素 


对 于 网 站 应 用 来 说 ,表现 最 为 突出 的 就 是 客户 端 与 服务 器 端的 交互 。HTML 5 增加 
了 交互 体验 元 素 ,本 节 将 详细 介绍 这 些 元 素 。 


3.2.1 details 元 素 和 summary 元 素 


details 元 素 用 于 描述 文档 或 文档 某 个 部 分 的 细节 。summary 元 素 经 常 与 details 元 
素 配 合 使 用 ,作为 details 元 素 的 第 一 个 子 元 素 , 用 于 为 details 定义 标题 。 标 题 是 可 见 的 ， 
当 用 户 单 击 标题 时 ,会 显示 或 隐藏 details 中 的 其 他 内 容 。 

【 例 3-7】 使 用 details 元 素 和 summary 元 素描 述 文档 ,本 例文 件 3-7. html 在 浏览 器 
中 的 显示 效果 如 图 3-8 所 示 。 























代码 如 下 : 
<html> 区 RE Dweb\ch3\3-7ht DP- OX 
< head> 全 details 和 summary 元 素 示 例 x 
<meta charset= "gb2312"> 宇宙 电子 
<title> details 和 sumrary 元 素 示例 < /title> .宇宙 电子 测试 基地 
< /tea “ 宇宙 电子 管理 体系 
<body> ”宇宙 电子 经 营 模式 
<details> 瑟 100% = 
< summary> 宇 宙 电 子 < /summary> 
<ul> 图 3-8 例 3-7 的 页 面 显示 效果 
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<1i> 宇 宙 电 子 测试 基地 < /1i> 
<11> 宇 宙 电 子 管理 体系 < /1i> 
<1> 宇 宙 电 子 经 营 模式 < /1i> 
</ul> 
< /details> 
< /body> 
< /htm> 


需要 说 明 的 是 ,目前 只 有 Chrome 和 Safari 浏览 器 支持 details 元 素 的 折 革 效果。 本 
例 车 要 实现 标题 的 折 琶 效果 ,需要 在 Chrome 浏览 器 中 浏览 验证 。 标 题 的 折 秋 效果 如 
图 3-9 所 示 ,标题 的 展开 效果 如 图 3-10 所 示 。 


© detailsflsurn > - © details 和 sur 
C file///D/we 六 C Afile///D/wew 
> 宇宙 电子 v 宇宙 电子 


。 宇宙 电子 测试 基地 
。 宇宙 电子 管理 体系 
。 宇宙 电子 经 营 模式 





图 3-9 ”标题 的 折 对 效果 图 3-10 标题 的 展开 效果 


3.2.2 progress 元 素 


progress 元 素 用 于 表示 一 个 任务 的 完成 进度 。 这 个 进度 可 以 是 不 确定 的 ,只 是 表示 
进度 正在 进行 ,但 是 不 清楚 还 有 多 少 工作 没有 完成 。 

progress 元 素 的 常用 属性 值 有 两 个 ,具体 如 下 。 

。 value: 已 经 完成 的 工作 。 

。 max: 总 共有 多 少 工作 。 

其 中 ,value 和 max 属性 的 值 必须 大 于 0, 且 value 的 值 要 小 于 或 等 于 max 属性 的 值 。 

【 例 3-8】 使 用 progress 元 素 显 示 项 目 开 
发 进度 ,本 例文 件 3-8. html 在 浏览 器 中 的 显 © progressiR7N 
示 效 果 如 图 3-11 所 示 。 CG ©file///D:/web/ch3/3-8.htr 安 ' 以 


td 机 器 人 项 目 开发 进度 


<html> 
<head> 
<meta charset= "gb2312"> 
<title> progress 元 素 示例 < /title> 图 3-11 例 3-8 的 页 面 显示 效果 
< /head> 
<body> 
<hl> 机 器 人 项 目 开 发 进度 < /hi> 
<p> <progress min= "0" max= "100" value= "60"> < /progress> < /p> 
< /body> 
< /html> 
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需要 说 明 的 是 ,IE 9 浏览 器 并 不 支持 progress 元 素 ,本 例 的 显示 效果 是 在 Chrome 浏 
览 器 中 实现 的 。 


33 表 格 
表格 是 网 页 中 的 一 个 重要 容器 元 素 ,表格 除了 用 来 显示 数据 还 用 于 搭建 网 页 的 结构 。 


3.3.1 表格 的 结构 


表格 是 由 行 和 列 组 成 的 二 维 表 ,而 每 行 又 由 一 个 或 多 个 单元 格 组 成 ,用 于 放置 数据 或 
其 他 内 容 。 表 格 中 的 单元 格 是 行 与 列 的 交叉 部 分 , 它 是 组 成 表格 的 最 基本 单元 。 单 元 格 
的 内 容 是 数据 ,也 称 为 数据 单元 格 ,数据 单元 格 可 以 包含 文本 、 图 片 、 列 表 、 段 落 、 表 单 . 水 
平 线 或 表格 等 元 素 。 表 格 中 的 内 容 按 照相 应 的 行 或 列 进行 分 类 和 显示 如 图 3-12 所 示 。 








图 3-12 表格 的 基本 结构 


3.3.2 表格 的 基本 语法 


在 HTML 语法 中 ,表格 主要 由 3 个 标签 来 构成 : 即 二 table>、 二 tr 之 生 td 之 。 表 
格 的 标签 为 二 table> , 行 的 标签 为 二 tr> , 表 项 的 标签 为 二 td 之 。 表 格 的 语法 格式 如 下 : 


< table border= "™n" wddth= "x| x%" height= "y| y%" oellspacing= "i" cellpadding= 
Hr> 
< capticn align= "left| right|top|bottom valigr= top|bottar> 标题 < /caption> 
<tr><th> 表 头 < /th><th> 表 头 < /th><th> .</th><th> 表 头 nc /th>< /tr> 
<tr><t 中 表 项 lc /td><toD> 表 项 < [t 中 <t .x /to><tD 表 项 x /to</tr> 


<t<tm 表 项 l< /t 中 <t 中 表 项 Kx /t 中 <t 中 .</td<t 中 表 项 nc /t 中 </tr> 
</table> 
在 上 面 的 语法 中 ,使 用 忆 caption 之 标签 可 为 每 个 表格 指定 唯一 的 标题 。 一 般 情况 下 
标题 会 出 现在 表格 的 上 方志 caption 之 标签 的 align 属性 可 以 用 来 定义 表格 标题 的 对 齐 
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方式 。 在 HTML 标准 中 规定 ,二 caption 二 标签 要 放 在 打开 的 二 table 二 标签 之 后 , 且 网 页 
中 的 表格 标题 不 能 多 于 一 个 。 

表格 是 按 行 建立 的 ,在 每 一 行 中 填 人 该 行 每 一 列 的 表 项 数据 。 表 格 的 第 一 行为 表 头 ， 
文字 样式 为 居中 、 加 粗 显示 ,通过 二 th 二 标签 实现 。 

在 浏览 器 中 显示 时 ,二 th 二 标签 的 文字 按 粗 体 显示 , 二 td 二 标签 的 文字 按 正常 字体 
显示 。 

表格 的 整体 外 观 由 二 table 二 标签 的 属性 决定 ,下 面 将 详细 介绍 如 何 设置 表格 的 属性 。 


3.3.3 表格 的 属性 


表格 是 网 页 布局 中 的 重要 元 素 , 它 有 丰富 的 属性 ,可 以 对 其 设置 进而 美化 表格 。 
1. 设置 表格 的 边框 


可 以 使 用 二 table 二 标签 的 border 属性 为 表格 添加 边框 并 设置 边框 宽度 及 颜色 。 表 
格 的 边框 按照 数据 单元 将 表格 分 割 成 单元 格 ,边框 的 宽度 以 像素 为 单位 ,默认 情况 下 
为 0。 


2. 设置 表格 的 大 小 


如 果 需 要 表格 在 网 页 中 占用 适当 的 空间 ,可 以 通过 width 和 height 属性 指定 像素 值 
来 设置 表格 的 宽度 和 高 度 , 也 可 以 通过 表格 宽度 占 浏 览 器 窗口 的 百分比 来 设置 表格 的 
大 小 。 

width 属性 和 height 属性 不 但 可 以 设置 表格 的 大 小 ,还 可 以 设置 表格 单元 格 的 大 小 ， 
为 表格 单元 设置 width 属性 或 height 属性 ,将 影响 整 行 或 整 列 单元 的 大 小 。 

3. 设置 表格 的 背景 颜色 

表格 背景 默认 为 白色 ,根据 网 页 设计 要 求 ,设置 bgcolor 属性 ,可 以 设 定 表 格 背景 颜 
色 , 以 增加 视觉 效果 。 

4. 设置 表格 的 背景 图 像 

表格 背景 图 像 可 以 是 GIF JPEG 或 PNG 3 种 图 像 格式 。 设 置 background 属性 ,可 
以 设 定 表格 背景 图 像 。 

同样 ,可 以 使 用 bgcolor 属性 和 background 属性 为 表格 中 的 单元 格 添加 背景 颜色 或 
背景 图 像 。 需 要 注意 的 是 ,为 表格 添加 背景 颜色 或 背景 图 像 时 ,必须 使 表格 中 的 文本 数据 
颜色 与 表格 的 背景 颜色 或 背景 图 像 形成 足够 的 反差 。 否 则 ,将 不 容易 分 辩 表格 中 的 文本 
数据 。 


5. 设置 表格 的 单元 格 间距 


使 用 cellspacing 属性 可 以 调整 表格 的 单元 格 和 单元 格 之 间 的 间距 ,使 表格 布局 不 会 
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显得 过 于 紧凑 。 
6. 设置 表格 的 单元 格 边 距 


单元 格 边 距 是 指 单元 格 中 的 内 容 与 单元 格 边 框 的 距离 ,使 用 cellpadding 属性 可 以 调 
整 单元 格 中 的 内 容 与 单元 格 边框 的 距离 。 


7. 设置 表格 在 网 页 中 的 对 齐 方式 


表格 在 网 页 中 的 位 置 有 3 种 : 居 左 、 居 中 和 居 右 。 使 用 align 属性 设置 表格 在 网 页 中 
的 对 齐 方式 ,在 默认 的 情况 下 表格 的 对 齐 方式 为 左 对 齐 。 格 式 如 下 : 


<table align= "left| oanter| right"> 


当 表 格 位 于 页 面 的 左 侧 或 右 侧 时 ,文本 填充 在 男 一 侧 ; 当 表格 居中 时 ,表格 两 边 没有 
文本 ; 当 align 属性 省 略 时 ,文本 在 表格 的 下 面 。 


8. 表格 数据 的 对 齐 方式 


(1) 行 数据 水 平 对 齐 。 使 用 align 可 以 设置 表格 中 数据 的 水 平 对 齐 方式 。 如 果 在 
到 tr 之 标签 中 使 用 align 属性 ,将 影响 整 行 数据 单元 的 水 平 对 齐 方式 。align 属性 的 值 可 
以 是 left ,center \right, 默 认 值 为 left。 

(2) 单元 格 数据 水 平 对 齐 。 如 果 在 某 个 单元 格 的 二 td 二 标签 中 使 用 align 属性 ,将 影 
响 该 单元 格 数据 水 平 对 齐 方式 。 

(3) 行 数据 垂直 对 齐 。 如 果 在 二 tr 二 标签 中 使 用 valign 属性 ,将 影响 整 行 数据 单元 
的 垂直 对 齐 方式 ,这 里 的 valign 值 可 以 是 top、middle、bottom、baseline。 它 的 默认 值 为 
middle。 

【 例 3-9】 制作 宇宙 电子 季度 销量 一 览 表 , 本 例文 件 3-9. html 在 浏览 器 中 显示 的 效 
果 如 图 3-13 所 示 。 





























[= Ee 
Ca | 司 pwebvhaa-ohml p-oxl es 
组 - 
宇宙 电子 季度 销量 一 览 表 
分 类 一 季度 二 季度 三 季度 四 季度 

智能 机 器 系列 300 400 500 400 

工业 控制 系列 450 350 550 500 

白色 家 电 系列 560 450 300 250 

胞 100% ~ 








图 3-13 ”宇宙 电子 季度 销量 一 览 表 
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代码 如 下 : 


<htm> 

<head> 
<title> 宇 宙 电 子 季度 销量 一 览 表 < /title> 

< /head> 

<body> 
<hl align= "center> 宇 宙 电 子 季度 销量 一 览 表 < /> 
< table width= "720" height= "200" border= "3" bordercolor= 只 ccoccc" align= 

"center" bgcolor= 啡 ddd3dd " oellspacing= "5" cellpadding= "3"> 


<tr bgcolor= 只 eeeeee> < 二 -设置 表格 第 1 行 --> 
<th> 分 类 < /th> < 上 -设置 表格 的 表 头 --> 
<th> 一 季度 < /th> <!- -设置 表 格 的 表 头 --> 
<th> 二 季度 < /th> <!-- 设 置 表格 的 表 头 --> 
<th> 三 季度 < /th> <!- -设置 表 格 的 表 头 --> 
<th> 四 季度 < /th> < 上 -设置 表格 的 表 头 --> 

</tr> 

<tr> <!-- 设 置 表格 第 2 行 --> 


<td align= "oenter"> 智 能 机 器 系列 < /ta>< !-- 单 元 格 内 容 居中 对 齐 --> 
< td align= "oenter"> 300< /td> 
< td align= "oenter"> 400< /td> 
< td align= "oenter"> 500< /td> 
< td align= "oenter"> 400< /td> 

< /tr> 

<tr> <!-- 设 置 表格 第 3 行 --> 
<td align= "center"> 工 业 控制 系列 < /ta>< !-- 单 元 格 内 容 居 中 对 齐 --> 
< td align= "oanter"> 450< /td> 
< td align= "oenter"> 350< /td> 
< td align= "oenter"> 550< /td> 
< td align= "oenter"> 500< /td> 

</tr> 

<tr> <!-- 设 置 表格 第 4 行 --> 
<td align= "center"> 白 色 家 电 系 列 < /ta>< !- -单元 格 内 容 居 中 对 齐 - -> 
< td align= "center"> 560< /td> 
< td align= "center"> 450< /td> 
< td align= "oenter"> 300< /td> 
<td align= "center"> 250< /td> 

< /tr> 

< /table> 
< /body> 
< /htm> 


【说 明 】 
(1) 二 th 二 标签 用 于 定义 表格 的 表 关 ,一般 是 表格 的 第 1 行 数据 ,以 粗 体 、 居 中 的 方 
式 显 示 。 
(2) 在 下 浏览 器 中 ,表格 和 单元 格 的 背景 色 必须 使 用 颜色 的 英文 单词 或 十 六 进 制 代 
码 , 而 不 能 使 用 颜色 的 十 六 进 制 缩写 形式 。 例 如 .上 面 代码 中 的 bordercolor 一 "并 cccccc” 
不 能 缩写 为 bordercolor 二 "# ccc"。 否 则 ,边框 颜色 将 显示 为 黑色 。 
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3.3.4 跨行 跨 列 表格 


colspan 和 rowspan 属性 用 于 建立 跨行 跨 列 表格 ,所谓 跨行 跨 列 表格 ,是 指 单元 格 的 
个 数 不 等 于 行列 的 数值 。 在 实际 应 用 中 经 常 使 用 不 规范 表格 ,需要 把 多 个 单元 格 合并 为 
一 个 单元 格 ,也 就 是 要 用 到 表格 的 跨行 跨 列 功能 。 


1。 跨行 
跨行 是 指 单元 格 在 垂直 方向 上 合并 ,语法 如 下 : 


<table> 
<tr> 
<td rowspar= "所 跨 的 行 数 吃 单元 格 内 容 < /td 
< /tr 
< /table> 


其 中 ,rowspan 指明 该 单元 格 应 有 多 少 行 的 跨度 ,在 一 th 之 和 一 td 之 标签 中 使 用 。 
2. 跨 列 
跨 列 是 指 单元 格 在 水 平方 向 上 合并 ,语法 如 下 : 


<table> 
<tr> 
<td colspar= "所 跨 的 行 数 吃 单元 格 内 容 < /td> 
</tr> 
< /table> 


其 中 ,colspan 指明 该 单元 格 应 有 多 少 列 的 跨度 ,在 一 th 之 和 < 一 td> 标 签 中 使 用 。 
3. 跨行、 跨 列 


【 例 3-10】 制作 一 个 跨行 跨 列 展示 的 产品 销 
量 表格 ,本 例文 件 3-10. html 在 浏览 器 中 显示 的 效 
果 如 图 3-14 所 示 。 智能 机 器 系列 

代码 如 下 : 工业 控制 系列 




















<html> 
<head> 
<title> 跨 行 跨 列表 格 < /title> 图 3-14 ”跨行 跨 列 的 效果 
< /head> 
< body> 
< table width= "300" border= "3" bgcolor= "#00000d"> 








> 

<td colspan= "3"> 产 品 销量 < /td> < 上 -设置 单元 格 水 平 跨 3 列 --> 
< tr 
> 
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<tq rowspar= "2"> 智 能 机 器 系列 < /to> < 上 -设置 单元 格 垂直 跨 2 行 --> 
<t 中 机 器 人 < /td 
<ta> 200< /td> 

< /tr> 

E> 
<td> 智 能 家 居 < /td> 
<to> 150< /to> 

</tr> 

<tr> 
<tq rowspar= "2"> 工 业 控 制 系列 < /to> < 二 -设置 单元 格 垂直 跨 2 行 --> 
<t 中 数控 机 床 < /td> 
<ta> 300< /to> 

Hs 

<tr> 
<td> 红 外 摄影 机 < /td> 
< td> 250< /td> 

</tr> 

< /table> 
< /pody> 
< /htm> 


【说 明 】 表格 跨行 跨 列 后 ,并 不 改变 表格 的 特点 。 表 格 中 同行 的 内 容 总 高 度 一 致 , 同 
列 的 内 容 总 宽度 一 致 ,各 单元 格 的 宽度 或 高 度 互相 影响 ,结构 相对 稳定 ,不 足 之 处 是 不 能 
灵活 地 进行 布局 控制 。 


3.3.5 表格 数据 的 分 组 


表格 数据 的 分 组 标签 包括 过 thead>、 一 tbody 之 和 二 tfoot> ,主要 用 于 对 报表 数据 进 
行 逻辑 分 组 。 其 中 ,二 thead 二 标签 定义 表格 的 头 部 ;二 tbody 二 标签 定义 表格 主体 , 即 报 
表 详 细 的 数据 描述 ;二 tfoot 二 标签 定义 表格 的 脚 部 , 即 对 各 分 组 数据 进行 汇总 的 部 分 。 

如 果 使 用 二 thead>、. 二 tbody 之 和 到 tfoot 过 元素 ,就 必须 全 部 使 用 。 它 们 出 现 的 次 序 
是 二 thead 二 、 一 tbody 二 .一 tfoot> ,必须 在 过 table 之 内 部 使 用 这 些 标签 ,二 thead 二 内 部 
必须 拥有 二 tr 二 标签 。 

【 例 3-11】 制作 产品 销量 季度 数据 报表 ,本 例文 件 3-11. html 的 浏览 效果 如 图 3-15 
所 示 。 

代码 如 下 : 


<htm> 
<head> 
<title> 产 品 销量 季度 数据 报表 < /title> 
< /head> 
<body> 
< table width= "550" border= "6" alignr "center"™> 
< 二 -设置 表格 宽度 为 550px, 边 框 Ge- -> 
<caption> 产 品 销量 季度 数据 报表 </caption> ”< 上 二 -设置 表格 的 标题 --> 
< thead style= "background: #0af™> < 上 -设置 报表 的 页 眉 --> 
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午 度 平均 产品 销量 
局 








图 3-15 产品 销量 季度 数据 报表 


< /thead> < 上 -页 眉 结 束 --> 
<tbody style= "background: # 6ccn> < 上 -设置 报表 的 数据 主体 --> 


< td> 1200< /td> 
</tr> 
<tr> 
<t 中 三 季度 < /td 中 
<to> 1350< /td> 
< /tr> 
<tr> 
<to> 四 季度 < /td> 
< td> 1150< /td> 
</tr> 
< /tbody> < 二 -数据 主体 结束 --> 
< tfoot style= "background: # ff6"> < 上 -设置 报表 的 数据 页 脚 --> 
<tr> 
<t 中 季度 平均 产品 销量 < /td> 
<to 1252< /to> 
</tr> 
<tr> 
<t 中 总 计 < /td> 
<to> 5010< /td> 
</tr> 
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< /tfoot> < 上 -页 脚 结 束 --> 
< /table> 
< /pody> 
< /him> 


3.3.6 ”案例 一 一 使 用 表格 布局 宇宙 电子 产品 展示 页 面 


在 讲解 了 以 上 表格 基本 语法 的 基础 上 ,下 面 介绍 表格 在 页 面 局 部 布局 中 的 应 用 。 在 
设计 页 面 时 , 常 需要 利用 表格 来 定位 页 面 元素 。 使 用 表格 可 以 导入 表格 化 数据 ,设计 页 面 
分 栏 ,定位 页 面 上 的 文本 和 图 像 等 。 使 用 表格 还 可 以 实现 页 面 局 部 布局 ,类 似 于 产品 展 
示 、 新 闻 列 表 这 样 的 效果 ,可 以 采用 表格 来 实现 。 

【 例 3-12】 使 用 表格 布局 宇宙 电子 产品 展示 页 面 ,本 例文 件 3-12. html 在 浏览 器 中 
显示 的 效果 如 图 3-16 所 示 。 
































|] DAweb\ch3\3-12.html PD-ox| no 
仿 主 诗 电 子 产品 展示 K 面 。 x 
产品 展示 
可 mm 
| Ss se 
| Ft Ee 
| 机 器 人 红外 摄像 机 
可 Re we 
Si = 
和 站 
| 机 器 人 红外 摄像 机 
瑟 100% ~ 
图 3-16 产品 展示 页 面 
<html> 
<head> 
<title> 宇 窗 电 子 产品 展示 页 面 < /title> 
< /head> 
<body> 


<h2 alignr "center"> 产 品 展示 < /h2> 
< table width= "528" border= "0" align= "Center"> 
> 
< td height= "100" align= "center"> < img src= "images/01.jpg"/>< /td> 
< td alignr "oenter"> < img src= "images/02.jpg"/>< /td 
< td alignr "oenter"> < img src= "images/03.jpg"/>< /td 
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< /tr> 

> 
<td width= "170" height= "20" align= "oenter"> 机 器 人 < /td> 
<td align= "oanter"> 智 能 家 居 < /td> 
<tq align= "center> 红 外 摄像 机 < /td> 

< /tr> 

E> 
< td height= "100" aligr= "center"> < img src= "images/01.jpg"/> < /to> 
< td aligr= "oanter"> < img src= "images/02.jpg"/> < /td> 
< td alignr "center"> < img src= "images/03.jpg"/>< /td> 

</tr> 

<tr> 
< td width= "170" height= "20" align= "oenter"”> 机 器 人 < /td> 
<td align= "center"> 智 能 家 居 < /to> 
<td align= "center"> 红 外 摄像 机 < /td> 

< /tr> 

< /table> 
< /pody> 
< /htm> 


34 表 单 


表单 是 网 页 中 最 常用 的 元 素 , 是 网 站 服务 器 端 与 客户 端 之 间 沟 通 的 桥梁 。 表 单 在 网 
上 随处 可 见 , 常 被 用 于 登录 页 面 输入 账号 、 客 户 留 言 .搜索 产品 等 。 图 3-17 所 示 为 留言 板 
表单 。 





是 留言 板 
者 昵 称 : 名 称 必 十 
* 留言 内 容 : 内 容 必 填 
, 
联系 电话 : 
性 别 : 男 
+ i Ere 
[提交 | | 重 设 | 








图 3-17 留言 板 表单 


3.4.1 表单 的 基本 概念 


表单 被 广泛 用 于 各 种 信息 的 搜集 与 反馈 。 一 个 完整 的 交互 表单 由 两 部 分 组 成 : 一 部 
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分 是 客户 端 包 含 的 表单 页 面 , 用 于 填写 浏览 者 进行 交互 的 信息 ; 另 一 部 分 是 服务 端的 应 用 
程序 ,用 于 处 理 浏 览 者 提交 的 信息 。 当 访问 者 在 Web 浏览 器 中 显示 的 表单 中 输入 信息 
后 , 单 击 “ 提 交 ” 按 钮 ,这 些 信息 将 被 发 送 给 服务 器 ,服务 器 端 脚本 或 应 用 程序 将 对 这 些 信 
息 进行 处 理 , 并 将 结果 发 送 回 访问 者 。 表 单 的 工作 原理 如 图 3-18 所 示 。 





3 生成 一 个 新 的 HTML 


加 文件 并 发 送 回访 问 埋 
名 CF 肢 本 对 表 

















格 进行 处 理 





格 并 且 交 给 Web 
版 务 闭 处 理 


图 3-18 表单 的 工作 原理 





3.4.2 表单 标签 


网 页 上 具有 可 输入 表 项 及 项 目 选择 等 控制 所 组 成 的 栏目 称 为 表单 。 志 form 之 标签 
用 于 创建 供用 户 输入 的 HTML 表单 .二 form 二 标签 是 成 对 出 现 的 ,在 开始 标签 二 form 二 
和 结束 标签 二 /form 二 之 间 的 部 分 就 是 一 个 表单 。 

在 一 个 HTML 页 面 中 允许 有 多 个 表单 .表单 的 基本 语法 及 格式 如 下 : 


< fom name= "表单 名 " action= "URL" method= "get |post"”> 


< /fom> 

二 form 放 标签 主要 处 理 表单 结果 的 处 理 和 传送 ,常用 属性 的 含义 如 下 。 

name 属性 : 表单 的 名 字 ,在 一 个 网 页 中 用 于 唯一 识别 一 个 表单 。 

action 属性 : 表单 处 理 的 方式 ,是 E-mail 地 址 或 网 址 。 

method 属性 : 表单 数据 的 传送 方向 ,是 获得 (GET) 表 单 还 是 送出 (POST) 表 单 。 


3.4.3 ”表单 元 素 


表单 是 一 个 容器 ,可 以 存放 各 种 表单 元 素 , 如 按钮 .文本 域 等 。 表 单 中 通常 包含 一 
或 多 个 表单 元 素 ,常见 的 表单 元 素 见 表 3-1。 
表 3-1 常见 的 表单 元 素 











表单 元 素 功 能 
input 该 标签 规定 用 户 可 输入 数据 的 输入 字段 
keygen 该 标签 规定 用 于 表单 的 密 钥 对 生成 器 字段 
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续 表 
表单 元 素 功 能 
object 该 标签 用 来 定义 一 个 说 入 的 对 象 
output 该 标签 用 来 定义 不 同类 型 的 输出 ,比如 脚本 的 输出 
select 该 标签 用 来 定义 下 拉 列 表 / 菜 单 
textarea 该 标签 用 来 定义 一 个 多 行 的 文本 输入 区 域 





例如 ,常见 的 网 上 问卷 调查 表单 ,其 中 包含 的 表单 元 素 如 图 3-19 所 示 。 








字 宙 电子 问卷 调查 表 
单行 文本 低 
密码 框 
性 别 本 勇 -= 去 单 选 按钮 
最 可 欢 的 产品 系列 加 机 器 人 加 智能 家 居 色 家 电 
最 近 关注 的 产品 回 机 器 人 加 智能 家 居 甘 - 白 色 家 叫 复 选 框 
客户 年 龄 3- 多 一 - 下 拉 列 表 
TEE 全 多 行文 本 域 
“提交 ”按钮 
“ 重 置 ”按钮 


图 3-19 常见 的 表单 元 素 


1. 二 input 之 元 素 


到 input 盖 元 素 用 来 定义 用 户 输入 数据 的 输入 字段 ,根据 不 同 的 type 属性 ,输入 字段 
可 以 是 文本 字段 .密码 字段 、 复 选 框 . 单 选 按钮 .按钮 .隐藏 域 .电子 邮件 .日 期 时 间 数值 、 
范围 ,图像 ,文件 等 。 二 input 二 元素 的 基本 语法 及 格式 如 下 : 

<irmput type= " 表 项 类 型 " neme=" 表 项 名 " value= 哦 认 值 " size= "x" maxlength="y" /> 

二 input 记 元 素 常 用 属性 的 含义 如 下 。 

type 属性 : 指定 要 加 入 表单 项 目的 类 型 (text、 password、 checkbox、 radio、button、 
hidden .email date pickers number range image file、submit 或 reset 等 ) 。 

name 属性 : 该 表 项 的 控制 名 ,主要 在 处 理 表单 时 起 作用 。 

size 属性 : 输入 字段 中 的 可 见 字 符 数 。 

maxlength 属性 : 允许 输入 的 最 大 字符 数目 。 

checked 属性 : 当 页 面 加 载 时 是 否 预先 选择 该 input 元 素 ( 适 用 于 type 一 "checkbox" 
或 type 一 "radio") 。 

step 属性 : 输入 字段 的 合法 数字 间隔 。 

max 属性 : 输入 字段 的 最 大 值 。 

min 属性 : 输入 字段 的 最 小 值 。 
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required 属性 : 设置 必须 输入 字段 的 值 。 

pattern 属性 : 输入 字段 的 值 的 模式 或 格式 。 

readonly 属性 : 设置 字段 的 值 无 法 修改 。 

placeholder 属性 : 设置 用 户 填写 输入 字段 的 提示 。 

autocomplete 属性 : 设置 是 否 使 用 输入 字段 的 自动 完成 功能 。 

autofocus 属性 : 设置 输入 字段 在 页 面 加 载 时 是 否 获得 焦点 (不 适用 于 type 一 
"hidden") 。 

disabled 属性 : 当 页 面 加 载 时 是 否 禁用 该 一 input 之 元 素 ( 不 适用 于 type 一 
"hidden") 。 

(1) 文字 和 密码 的 输入 。 使 用 二 input 之 元 素 的 type 属性 ,可 以 在 表单 中 加 入 表 项 ， 
并 控制 表 项 的 风格 。 如 果 type 属性 值 为 text, 则 输入 的 文本 以 标准 的 字符 显示 ;如 果 
type 属性 值 为 password, 则 输入 的 文本 显示 为 **”。 在 表 项 前 应 加 入 表 项 的 名 称 , 如 “您 
的 姓名 ”等 ,以 告诉 浏览 者 在 随后 的 表 项 中 应 输入 的 内 容 。 文 本 框 和 密码 框 的 格式 如 下 : 

< input type= "text" name= "文本 框 名 必 

< imput type= "password" name= "密码 框 名 > 

(2) 重 置 和 提交 。 表 单 按钮 用 于 控制 网 页 中 的 表单 。 表 单 按钮 有 4 种 类 型 , 即 “ 提 
交 ” 按 钮 “ 重 置 ?按钮 .普通 按钮 和 图 片 按钮 。 使 用 * 提 交 ?” 按 钮 (submit) ,可 以 将 填写 在 文 
本 域 中 的 内 容 发 送 到 服务 器 ;使 用 * 重 置 ?按钮 (reset) ,可 以 将 表单 输入 框 的 内 容 返回 初 
始 值 ;使 用 普通 按钮 (button), 可 以 制作 一 个 用 于 触发 事件 的 按钮 ;使 用 图 片 按钮 
(image) ,可 以 制作 一 个 美观 的 按钮 。 

4 种 按钮 的 格式 如 下 : 


< input type= "sutmit" value= "按钮 名 "> 

< input type= "reset" value= "按钮 名 "> 

< input type= "button" value= "按钮 名 "> 

< input type= "image" sro=" 图 片 来 源 吃 

(3) 复 选 框 和 单 选 钮 。 在 页 面 中 有 些 地 方 需要 列 出 几 个 项 目 , 让 浏览 者 通过 选择 钮 
来 选择 项 目 。 选 择 钮 可 以 是 复 选 框 (checkbox) 或 单 选 钮 (radio)。 用 二 input 二 元 素 的 
type 属性 可 设置 选择 钮 的 类 型 ;value 属性 可 设置 该 选择 钮 的 控制 初 值 ,用 于 告诉 表单 制 
作者 选择 结果 ;用 checked 属性 表示 是 否 为 默认 选中 项 ;name 属性 是 控制 名 ,同一 组 的 选 
择 钮 的 控制 名 是 一 样 的 。 复 选 框 和 单 选 钮 的 格式 如 下 : 

< imput type= "checkbox" name=" 复 选 框 名 " value= "提交 值 " checked= "checked"> < input type= "radio" 

name= " 单 选 钮 名 " value= "提交 值 " checked= "checked"> 

(4) 电子 邮件 输入 框 。 当 用 户 需 要 通过 表单 提交 电子 邮件 信息 时 ,可 以 将 二 input 二 
元 素 的 type 属性 设置 为 E-mail 类 型 , 即 可 设计 用 于 包含 E-mail 地 址 的 输入 框 。 当 用 户 
提交 表单 时 ,会 自动 验证 输入 E-mail 值 的 合法 性 。 格 式 如 下 : 


< input type= "email" name= "电子 邮件 输入 框 名 "> 
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(5) 日 期 时 间 选 择 器 。HTML 5 提供 了 日 期 时 间 选 择 器 date pickers, 拥 有 多 个 可 供 
选取 日 期 和 时 间 的 新 型 输入 文本 框 ,类 型 如 下 。 

date: 选取 日 月 、 年 。 

month: 选取 月 、 年 。 

week: 选取 周 和 年 。 

time: 选取 时 间 ( 小 时 和 分 钟 ) 。 

datetime: 选取 时 间 日 月 .年 (UTC 世界 标准 时 间 ) 。 

datetime-local: 选取 时 间 日 月、 年 (本 地 时 间 ) 。 

日 期 时 间 选 择 器 的 语法 格式 如 下 : 


< input type= "选择 器 类 型 " nane= "选择 器 名 性 


(6) URL 输入 框 。 当 用 户 需要 通过 表单 提交 网 站 的 URL 地 址 时 ,可 以 将 <input 二 
元 素 的 type 属性 设置 为 url 类 型 , 即 可 设计 用 于 包含 url 地 址 的 输入 框 。 当 用 户 提交 表 
单 时 ,会 自动 验证 输入 url 值 的 合法 性 。 格 式 如 下 : 


< imput type= "url" name= "url 输入 框 名 > 


(7) 数值 输入 框 。 当 用 户 需 要 通过 表单 提交 数值 型 数据 时 ,可 以 将 二 input 二 元 素 的 
type 属性 设置 为 number 类 型 , 即 可 设计 用 于 包含 数值 型 数据 的 输入 框 。 当 用 户 提交 表 
单 时 ,会 自动 验证 输入 数值 型 数据 值 的 合法 性 。 格 式 如 下 : 


< imput type= "nunber" name= "数值 输入 框 名 "> 


(8) 范围 滑动 条 。 当 用 户 需要 通过 表单 提交 一 定 范围 内 的 数值 型 数据 时 ,可 以 将 
去 input 二 元 素 的 type 属性 设置 为 range 类 型 , 即 可 设计 用 于 设置 输入 数值 范围 的 滑动 
条 。 当 用 户 提 交 表 单 时 ,会 自动 验证 输入 数值 范围 的 合法 性 。 格 式 如 下 : 


< :imput type= "range" name= "范围 滑动 条 名 > 


另外 ,用 户 在 使 用 数值 输入 框 和 范围 滑动 条 时 可 以 配合 使 用 max( 最 大 值 )、min( 最 
小 值 ) .step( 数 字 间 隔 ) 和 value( 默 认 值 ) 属 性 来 规定 对 数值 的 限定 。 


2. 选择 栏 过 select 之 


当 浏 览 者 选择 的 项 目 较 多 时 ,如 果 用 选择 钮 来 选择 , 占 页 面 的 空间 就 会 较 大 ,这 时 可 
以 用 二 select 二 标签 和 二 option 二 标签 来 设置 选择 栏 。 选 择 栏 可 分 为 两 种 : 弹出 式 和 字 
段 式 。 

1) 二 select 二 标签 

二 select 记 标签 的 格式 如 下 : 


< select size= "x" name= "控制 操作 名 " multiple> 
< apticn ..> .< /apticn> 
< apticn ..> ..< /apticn> 


< /select> 
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二 select 二 标签 各 个 属性 的 含义 如 下 。 

size: 可 选项 ,用 于 改变 下 拉 框 的 大 小 。size 属性 的 值 是 数字 ,表示 显示 在 列表 中 选 
项 的 数目 , 当 size 属性 的 值 小 于 列表 框 中 的 列表 项 数目 时 ,浏览 器 会 为 该 下 拉 框 添加 滚动 
条 ,用 户 可 以 使 用 滚动 条 来 查看 所 有 的 选项 ,size 默认 值 为 1 。 

name: 选择 栏 的 名 称 。 

multiple: 如 果 加 上 该 属性 ,表示 允许 用 户 从 列表 中 选择 多 项 。 

2) 一 option 之 标签 

一 option 过 标签 的 格式 如 下 : 


< apticn value= "HJ 选择 的 内 容 " selectedF "selected"> ..< /apticn> 


二 option 二 标签 各 个 属性 的 含义 如 下 。 

value: 用 于 设置 当 该 选项 被 选中 并 提交 后 ,浏览 器 传送 给 服务 器 的 数据 。 

selected: 用 来 指定 选项 的 初始 状态 ,表示 该 选项 在 初始 时 被 选中 。 

选择 栏 有 两 种 形式 : 弹出 式 选择 栏 和 字段 式 选 择 栏 。 字 段 式 选择 栏 与 弹出 式 选择 栏 
的 主要 区 别 在 于 ,前 者 在 二 select 之 中 的 size 属性 值 取 大 于 1 的 值 ,此 值 表示 在 选择 栏 中 
不 拖 动 滚动 条 就 可 以 显示 的 选项 的 数目 。 


3. 多 行文 本 域 过 textarea 之 ... 达 /textarea 之 


在 意见 反馈 栏 中 往往 需要 浏览 者 发 表意 见 和 建议 , 且 提 供 的 输入 区 域 一 般 较 大 ,可 以 
输入 较 多 的 文字 。 使 用 二 textarea 二 标签 可 以 定义 高 度 超过 一 行 的 文本 输入 框 ， 
< 一 textarea 二 标签 是 成 对 标签 ,开始 标签 二 textarea 二 和 结束 标签 二 /textarea 二 之 间 的 内 
容 就 是 显示 在 文本 输入 框 中 的 初始 信息 。 格 式 如 下 : 

<textarea name= "文本 域名 " rows= 吁 数 " cols=" 列 数 "> 


初始 文本 内 容 
< /textarea> 


其 中 的 行 数 和 列 数 是 指 不 拖 动 滚动 条 就 可 看 到 的 部 分 。 
3.4.4 ”案例 一 一 制作 宇宙 电子 会 员 注册 表单 


前 面 讲 解 了 表单 元 素 的 基本 用 法 ,其 中 ,文本 字段 比较 简单 ,也 是 最 常用 的 表单 标签 。 
选择 栏 在 具体 的 应 用 过 程 中 有 一 定 的 难度 ,读者 需要 结合 实践 .反复 练习 才能 够 掌握 。 下 
面 通过 一 个 综合 的 案例 将 这 些 表单 元 素 集成 在 一 起 ,制作 宇宙 电子 会 员 注 册 表 单 。 

【 例 3-13】 制作 宇宙 电子 会 员 注 册 表 单 ,本 例文 件 3-13. html 在 浏览 器 中 显示 的 效 
果 如 图 3-20 所 示 。 

代码 如 下 : 

< !doctype html> 


<html> 
<head> 
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人 SEE P- cx 本 

大 会员 注册 表 X 

会 员 注册 

账号 ， 

密码 ， 

性 别 ， 回 男 目 女 

爱好 ， 回 音乐 团 上 网 回 足球 目下 棋 

职业 : | 学 生 | 

收入 ，[3000~4000 元 区 ] 

电子 邮箱 ， 

生日 ，1990-11-11 

博客 地 址 ， 

年 龄 ，55 

工作 年 限 ，3 

个 人 简介 ， ~ 
成 100% ~ 








图 3-20 会 员 注册 表单 


<meta charset= "gb2312"> 
<title> 会 员 注 册 表 < /title> 
< /head> 
<body> 
<h2> 会 员 注册 < /h2> 
< fom> 
<P> 
账号 : < input type= "text" required name= "usemame"> 
< 人 > 
< 严 
密码 : < input type= "password" required name= "pass"> 
< 人 
<P 
性 别 : < input type= "radio" name= "sex" value=" 男 " checked> 男 
< input type= "radio" name= "sex" value=" 女 吃 女 
< 人 位 
<P> 
爱好 : < input type= "checkbox" name= mike" value= 哺 乐 吃 音乐 
< input type= "checkbox" name= "like" value= "上 网 " checked> 上 网 
< input type= "checkbox" name= "like" value= "足球 吃 足 球 
< input type= "checkbox" name= "like" value= "下 棋 吃 下 棋 
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</p 
<E> 
职业 : < select size= "3" name= "work"> 
<option value= "政府 职员 "> 政府 职员 < /cption> 
<cpticn value= "工程 师 " selected> 工 程 师 < /option> 
< caption value=" 工 人 > 工人 < /option> 
<cpticn value= 喇 师 " selected 教 师 < /option> 
<option value= "医生 "> 医生 < /option> 
<option value= "学 生 吃 学 生 < /cption> 
< /select> 
< 他 
<P> 
收入 : < select name= "salary"> 
<cption value= "1000 元 以 下 ">1000 元 以 下 < /option> 
< option value= "1000~ 2000 元 "> 1000~2000 元 < /option> 
< option value= "2000~ 3000 元 "> 2000~3000 元 < /option> 
< option value= "3000~ 4000 元 "selected> 3000~4000 元 < /aption> 
<option value= "4000 元 以 上 "> 4000 元 以 上 < /option> 
< /select> 
< 人 
<p> 
电子 邮箱 : < input type= "email" required name= "email" id= "email" 
Placeholder= "您 的 电子 邮箱 "> 
</> 
<P> 
生日 :<input type= "date" min= "1960- 01- 01" max= "2017- 3- 16" 
name= "birthday" idF "birthday" value= "1990- 11- 11"> 
< 人 位 
<P> 
博客 地 址 : < input type= "url" name= "blog" placsholder= "您 的 博客 地 址 " 
id "blog> 
< 人 
<P> 
年 龄 : < input type= "mmber" nare= "age" jcF "age" value= "25" autoomplete= 
"off" placeholder= "您 的 年 龄 必 
</p> 
<P> 
工作 年 限 : < jinput type= "range" min= "]" step= "1" max= "20" name= "slider" 
name= "workingyear" idF "workingyear" placsholder= "您 的 工作 年 限 " 
value="3"> 
</> 
<P> 
个 人 简介 : < textarea name= "think" cols= "40" rows= "4"> < /textarea> 
< 人 > 
< 
gribsp; gribsp; Sribsp; gribsp;< input type= "submit" name= "stimit" value= "得 
交 "/> grbsp; srbsp; 
< input type= "reset" name= "reset" value= " 重 写 " /> 
< 人/ 位 
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【说 明 】“ 职 业 ” 选 择 栏 使 用 的 是 弹出 式 选择 栏 ;* 收 入 ”选择 栏 使 用 的 是 字段 式 选择 
栏 ,其 二 select 二 标签 中 的 size 属性 值 设置 为 3。 


3.4.5 表单 分 组 


大 型 表单 容易 在 视觉 上 产生 混淆 ,通过 对 表单 分 组 可 以 将 表单 上 的 元 素 在 形式 上 进 
行 组 合 ,达到 一 目 了 然 的 效果 。 常 见 的 分 组 标签 有 去 fieldset 之 和 志 legend 盖 标签 。 格 式 
如 下 : 


< fom> 
<fieldset> 
< legend> 分 组 标题 < /legend> 
表单 元 素 .… 
< /fieldset> 


< /fom> 


其 中 ,二 fieldset 二 标签 可 以 看 作 表单 的 一 个 子 容器 ,将 所 包含 的 内 容 以 边框 环绕 方 
式 显示 ,二 legend 二 标签 则 是 为 二 fieldset 过 边框 添加 相关 的 标题 。 

【 例 3-14】 表单 分 组 示例 ,本 例文 件 3-14. html 在 浏览 器 中 显示 的 效果 如 图 3-21 
所 示 。 

















请 选择 个 人 课程 选修 情况 
回 计 算 机 


回 数学 
加 化 学 








图 3-21 表单 分 组 


代码 如 下 : 


<html> 
<head> 
<meta charset— "go?312"> 
<title> 表 单 分 组 < /title> 
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</head> 
<body> 
<fom> 
<fieldset> 
< legend> 请 选择 个 人 爱好 < /legend> 
< input type= "checkbox" name= "like" value= 吓 乐 吃 音 乐 
< input type= "checkbox" name= "like" value= "上 网 " checked> 上 网 
< input type= "checkbox" name= "like" value= "足球 吃 足 球 
< input type= "checkbox" name= "like" value= "下 棋 吃 下 棋 
< /fieldset> 
<br/> 
< fieldset> 
< legend> 请 选择 个 人 课程 选修 情况 < /legend> 
< input type= "dheckbcx" name= "choice" value= "omputer" /> 计算 机 <kbr/> 
< input type= "checkbox" name= "choice" value= "math" /> 数学 <br/> 
< input type= "dheckbox" name= "dhoioe" value= "chemical" /> 化 学 <br/> 
< /fieldset> 
</form> 
< /body> 
< /htm> 


3.4.6 使 用 表格 布局 表单 


从 上 面 的 宇宙 电子 会 员 注 册 表 单 案例 中 可 以 看 出 ,由 于 表单 没有 经 过 布局 ,页面 整体 
看 起 来 不 太美 观 。 在 实际 应 用 中 ,可 以 采用 以 下 两 种 方法 布局 表单 : 一 是 使 用 表格 布局 


表单 ;二 是 使 用 CSS 样式 布局 表单 。 本 节 主 要 介绍 使 用 表格 布局 表单 。 


【 例 3-15】 使 用 表格 布局 制作 宇宙 电子 联系 我 们 表单 ,表格 布局 示意 图 如 图 3-22 所 
示 , 最 外 围 的 虚线 表示 表单 ,表单 内 部 包含 一 个 6 行 3 列 的 表格 。 其 中 ,第 一 行 和 最 后 一 


行使 用 了 跨 2 列 的 设置 。 本 例文 件 3-15. html 在 浏览 器 中 显示 的 效果 如 图 3-23 所 示 。 

















图 3-22 表格 布局 示意 图 
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|] DAweb\ch3\3-15.html p-oxBrnoe 
您 放言 电子 联系 我 们 表单 


联系 我 们 


宇宙 电子 客户 支持 中 心服 务 于 全 国 的 最 终 客户 和 授权 服务 商 。 我 们 提供 
在 线 技术 支持 、 供 求 查询 、 投 诉 受 理 、 信 息 咨询 等 全 方位 的 一 站 式 服务 ， 请 
给 发 送 邮件 联系 我 们 。 


发 送 邮件 








网 址 : http:77 
请 输入 您 咨询 的 问题 …… 天 





























图 3-23 例 3-15 的 页 面 显示 效果 


代码 如 下 ; 
<html> 
<head> 
<title> 宇 宙 电 子 联系 我 们 表单 < /title> 
< /head> 
<body> 
<h> 联 系 我 们 < /> 
< grbep;&rbsp; &rbep;&ribsp; 宇宙 电子 客户 支持 中 心服 务 于 …… 此 处 省 略 文字 )< /p> 
< form> 
<table> 
<tr> 
<t 中 <h3> 发 送 邮件 < /h3>< /to> 
<td colspanr "2"> gnibsp;< /td> < !- -内 容 跨 2 列 并 且 用 “空格 ”填充 --> 
</tr> 
<tr> 
< td> gnbsp;< /td < 上 -内容 用 "空格 ”填充 以 实现 布局 效果 --> 
<t 中 姓名 : </td> 
< tod> < input type= "text" name= "Usemame" size="30"> < /td> 
</tr> 
<tr> 
< to> gnbsp;< /td> <!-- 内 容 用 “空格 ?填充 以 实现 布局 效果 --> 
<to> 邮 箱 : < /to> 
< td> < input type= "text" name= "email" size= "30"> < /td> 
</tr> 
之 EE 


< td> gnbsp;< /to> <!-- 内 容 用 “空格 ?填充 以 实现 布局 效果 --> 


<t 中 网 址 : < /to> 
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<tco> < irput type= "text" nare= "Url" size="30" vane= "http: //>< /tb 
</tr> 
<tr> 
< to snbspi< /to> < 上 -内 容 用 “空格 ?填充 以 实现 布局 效果 --> 
<td 咨 询 内 容 : < /td> 
< to> < textarea nare= "intro" cols= "40" rows= "4"> 请 输入 您 咨询 的 问题 …… 
< /textarea> < /td> 


</tr> 
<tr> 
< td> snbspj< /to> <!-- 内 容 用 “空格 ”填充 以 实现 布局 效果 -> 


< 上 -下 面 的 发 送 图 片 按钮 跨 2 列 --> 
<td olspar "2> < irput type= "image" src= "images/sibmit.gif" />< /to> 
</tr> 
</table> 
</form> 
< /body> 
</htm> 


3.4.7 表单 的 高 级 用 法 


在 某 些 情况 下 ,用 户 需 要 对 表单 元 素 进行 限制 ,设置 表单 元 素 为 只 读 或 禁用 , 常 应 用 
于 以 下 场景 。 

只 读 场景 : 网 站 服务 器 不 希望 用 户 修改 的 数据 .这 些 数据 在 表单 元 素 中 显示 。 例 如 ， 
注册 或 交易 协议 .商品 价格 等 

禁用 场景 : 只 有 满足 某 个 条 件 后 ,才能 选用 某 项 功能 。 例 如 ,只 有 用 户 同意 注册 协议 
后 , 才 允 许 单 击 “ 注 册 ” 按 钮 。 

只 读 和 禁用 效果 分 别 通 过 设置 readonly 和 disabled 属性 来 实现 。 

【 例 3-16】 制作 宇宙 电子 服务 协议 页 面 ,页 面 浏览 后 ,服务 协议 只 能 阅读 而 不 能 修 
改 , 并 且 只 有 用 户 同意 注册 协议 后 , 才 人 允许 单 击 注 册 ” 按 钮 ,本 例文 件 3-16. html 在 浏览 
器 中 显示 的 效果 如 图 3-24 所 示 。 











全 (3 [BD pswebvchava-l6html p -cx 性 











阅读 宇宙 电子 服务 协议 


机 欢迎 阅读 服务 条 教 协议 ,宇宙 电 子 的 权利 和 义 


同意 以 上 协议 回 [三 本 








3-24 例 3-16 的 页 面 显示 效果 
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代码 如 下 : 


<html> 
<head> 
<title> 宇 宙 电 子 服务 协议 < /title> 
< /head> 
<body> 
<h2> 阅读 宇宙 电子 服务 协议 < /> 
< fom> 
< textarea name= "content" cols= "50" rows= "5" readonly= "readonly"> 
欢迎 阅读 服务 条 款 协议 ,宇宙 电子 的 权利 和 义务 …… 
< /textarea> <br /><br /> 
同意 以 上 协议 < input name= "agree" type= "checkbox" /> <!-- 复 选 框 --> 
< irput nane= "register" type= "smit" value= "注册 "disabled "disabled" /> 
< 上 -提交 按钮 禁用 --> 
</form> 
< /body> 
</htm> 


【说 明 】 用 户 选择 “同意 以 上 协议 ” 复 选 框 并 不 能 真正 使 “注册 ”按钮 有 效 , 还 需 为 复 
选 框 添加 JavaScript 脚本 才能 实现 这 一 功能 ,这 里 只 是 讲解 如 何 使 表单 元 素 只 读 和 禁用 。 


习 题 


1. 使 用 跨行 跨 列 的 表格 制作 公告 栏 分 类 信息 ,如 图 3-25 所 示 。 
2. 使 用 表格 布局 商城 支付 选择 页 面 ,如 图 3-26 所 示 。 














由 DAweb\ch3\ 习 是 vt3-2.html 
司 部 i 交 付 远 径 x 













































































全 这 
由 快递 公司 代 收买 家 货款 ， 货 先 送 到 客户 
国人 本 
mm 于 隐 户 旺 于、 
— [| 局 户 可 以 通过 自己 所 拥有 的 借 记 卡 、 全 
蝇 银行， 申请 开间 同上 银行 ， 进 和 网 上 去 人 
一 优惠 全 4 
一 入 区 条 
图 3-25 题 1 图 图 3-26 题 2 图 


3. 使 用 表格 布局 技术 制作 用 户 注 册 表 单 ,如 图 3-27 所 示 。 
4. 制作 如 图 3-28 所 示 的 调查 问卷 表单 。 
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图 3-27 题 3 图 


C0) | ) oaweb\cha Iv heml 


ls _*e| 


(1) 您 选择 投资 公 郸 基金 的 主要 原因 是 ，( ) 


日 公 莫 运作 管理 规范 、 信和 全， 可 以 方便 地 查找 相关 信息 ， 申 购 、 赎 回 等 均 很 便利 

日 公募 基 金 有 比较 强大 的 氢 

日 公募 基 金 投资 门槛 较 低 , 及 有 元 的 扩招 人间 求 

(2) 您 庄 择 投资 专 户 一 对 多 基金 的 主要 原因 是 ，( ) 

日 专 户 一 对 多 基金 管理 规范 ， 同 公募 基 金 一 样 有 比较 强大 的 投 研 团 队 ， 且 投资 范围 、 投 资 比例 较 自由 
© nb dod 可 以 更 好 地 满足 投资 者 要 求 

© 


(3) 您 希望 获得 哪 方面 的 讯息 ? (多 选 题 ) 

















图 3-28 题 4 图 
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司 psweb\ch3\ 习 要 wd3-5.html Pp-ox|n 
合 分 元 素 的 综合 此 用 * 国 | 








宇宙 电子 测试 基地 


宇宙 微 电 子 封装 测试 基地 启动 于 2001 年 ， 是 一 家 专业 从 事 半 导 体 功率 器 件 和 其 他 电子 产品 封装 的 优秀 供应 商 。 工 厂 具 
备 从 美国 、 德 国 、 日 本 等 国际 和 地 区 原装 进口 的 世界 一 流 的 生产 设备 和 测试 仪器 ， 主 要 封装 形式 有 IT0-277、I0-92、 
T0-126、I0-251、T0-252、I0-220、I0-220F、I0-3P 等 。 


宇宙 电子 管理 体系 


和 9001、IS0 14001 和 TS 16949 管 理 体系 , 产品 符合 RoHS 环保 认证 、REACH 环 保 要 求 ， 广 泛 应 用 于 照明 灯 
饰 、 整 流 器 、 充 电器 、 开 关 电 源 、 音 响 等 行业 。 产 品 的 各 项 参数 指标 均 达到 国内 外 同类 产品 的 先进 水 平 ， 在 国内 外 电 
源 、 绿 色 有 昭明 领域 具有 较 高 影响 。 


宇宙 电子 经 营 模式 
宇宙 电子 采用 标准 化 和 定制 化 服务 相 结合 的 经 营 模式 ， 以 高 品质 的 产品 为 立足 点 ， 以 技术 服务 于 市 场 为 导向 ， 和 


优良 的 目 动 化 生产 和 测试 装备 为 保障 ， 以 科学 规范 的 管理 、 务 实 高 效 的 决策 、 朝 气 种 勃 的 高 素质 员工 团队 为 依托 ， 为 
客户 提供 持续 的 优良 产品 生产 服务 和 品质 保证 。 





瑟 100% ~ 


图 3-29 题 5 图 
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使 用 HTML 可 以 搭建 网 页 的 结构 ,使 用 CSS 可 以 控制 和 美化 网 页 的 外 观 , 但 是 对 网 
页 的 交互 行为 和 特效 却 无 能 为 力 , 此 时 JavaScript 脚本 语言 提供 了 解决 方案 。JavaScript 
是 制作 网 页 的 行为 标准 之 一 ,本 章 主要 介绍 JavaScript 语言 的 基本 知识 。 


41 JavaScript 简介 


脚本 (Script) 实 际 上 就 是 一 段 程序 ,用 来 完成 某 些 特殊 的 功能 。 脚 本 程序 既 可 以 在 


服务 器 端 运行 ( 称 为 服务 器 脚本 ,例如 ASP 脚本 .PHP 脚本 等 ) ,也 可 以 直接 在 浏览 器 端 
运行 ( 称 为 客户 端 脚本 ) 。 


客户 端 脚本 常用 来 响应 用 户 动作 、 验 证 表单 数据 ,以 及 显示 各 种 自 定义 内 容 , 如 对 话 
框 动画 等 。 使 用 客户 端 脚本 时 ,由 于 脚本 程序 随 网 页 同时 下 载 到 客户 机 上 ,因此 在 对 网 
页 进行 验证 或 响应 用 户 动作 时 ,无 须 通 过 网 络 与 Web 服务 器 进行 通信 ,从 而 降低 了 网 络 
的 传输 量 和 服务 器 的 负荷 ,改善 了 系统 的 整体 性 能 。 目 前 ,JavaScript 和 VBScript 是 两 种 
使 用 最 广泛 的 脚本 。VBScript 仅 被 Internet Explorer 支持 ,而 JavaScript 则 几乎 被 所 有 
浏览 器 支持 。 

JavaScript 是 一 种 基于 对 象 (Object) 和 事件 驱动 (Event Driven) ,并 具有 安全 性 能 的 
脚本 语言 。 它 可 与 HTML CSS 一 起 实现 在 一 个 Web 页 面 中 链接 多 个 对 象 ,与 Web 客 
户 交 互 的 作用 ,从 而 开发 出 客户 端的 应 用 程序 。JavaScript 通过 峙 入 或 调和 HTML 文档 
中 实现 其 功能 , 它 弥补 了 HTML 语言 的 不 足 , 是 Java 与 HTML 折 中 的 选择 。JavaScript 
的 开发 环境 很 简单 ,不 需要 Java 编译 器 ,而 是 直接 在 浏览 器 中 运行 ,因而 备 受 网 页 设计 者 
的 喜爱 。 

JavaScript 语言 的 前 身 叫 作 LiveScript。 自 从 Sun 公司 推出 著名 的 Java 语言 后 ， 
Netscape 公司 引进 了 Sun 公司 有 关 Java 的 程序 概念 ,将 LiveScript 重新 进行 设计 ,并 改 
名 为 JavaScript。 

目前 流行 的 多 数 浏览 器 都 支持 JavaScript, 如 Netscape 公司 的 Navigator 3.0 以 上 版 
本 ,Microsoft 公司 的 Internet Explorer 3.0 以 上 版 本 。 
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42 在 网 页 中 插入 JavaScript 的 方法 


在 网 页 中 插入 JavaScript 有 在 HTML 文档 中 嵌入 脚本 程序 .链接 脚本 文件 和 在 
HTML 标签 内 添加 脚本 3 种 方法 。 


4.2.1 在 HTML 文档 中 典 入 脚本 程序 


JavaScript 的 脚本 程序 包括 在 HTML 中 ,使 之 成 为 HTML 文档 的 一 部 分 。 其 格式 
如 下 : 
< script type= "text/javascript"> 
Javascript 语言 代码 ; 
Javascript 语言 代码 ; 


< /script> 

语法 说 明 如 下 。 

script 为 脚本 标记 。 它 必须 以 二 script type 一 "textV/javascript" 二 开头 ,以 二 /script 二 
结束 ,界定 程序 开始 的 位 置 和 结束 的 位 置 。 

script 在 页 面 中 的 位 置 决定 了 什么 时 候 装 载 脚本 ,如 果 和 希望 在 其 他 所 有 内 容 之 前 装 
载 脚 本 ,就 要 确保 脚本 在 页 面 的 二 head 二 ... 达 /head 二 之 间 。 

JavaScript 脚本 本 身 不 能 独立 存在 . 它 是 依附 于 某 个 HTML 页 面 ,在 浏览 器 端 运行 
的 。 在 编写 JavaScript 脚本 时 ,可 以 像 编 辑 HTML 文档 一 样 ,在 文本 编辑 器 中 输入 脚本 
的 代码 。 

【 例 4-1】 在 HTML 文档 中 嵌入 JavaScript 的 脚本 ,本 例文 件 4-1. html 在 浏览 器 中 
显示 的 效果 如 图 4-1 和 图 4-2 所 示 。 























Ssel[z] 
j | 司 bswebvch4a-Lhtml pv-cx| 人 二 可 
[© JavascriptF 人 Nm x 
JavaScript 例 子 ! 
re 


[加 欢迎 进入 javaScript 世 界 ! 














起 100%6 ~ 


图 4-1 加 载 时 的 运行 结果 
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es 
全 | Dawebvch44-Lhtml DP-ox|r oe 
钨 javascript 款 例 X 
JavaScript 例 子 ! 
努力 ， 奋斗 ! 
R100% ~ 
图 4-2 单 击 “ 确 定 ” 按 钮 后 的 运行 结果 
代码 如 下 : 
<html> 
<head> 


<title> Javascript 示例 < /title> 
< script language= "JavaScript"> 
document .write ("Javascript 例子 1"); 
alert ("欢迎 进入 Javascript 世界 1"); 
< /script> 
< /head> 
<body> 
<h3 style= "font: 12pt; font- family: ' 黑 体 '; color: red; text- align: 
center"> 努 力 , 奋 斗 ! </h> 
< /pody> 

< /html> 

【说 明 】 

(1) document. write() 是 文档 对 象 的 输出 函数 ,其 功能 是 将 括号 中 的 字符 或 变量 值 
输出 到 窗口 。alert() 是 JavaScript 的 窗口 对 象 方法 ,其 功能 是 弹出 一 个 对 话 框 并 显示 其 
中 的 字符 串 。 

(2) 图 4-1 所 示 为 浏览 器 加 载 时 的 显示 结果 ,图 4-2 所 示 为 单 击 自动 弹出 对 话 框 中 的 
“确定 ”按钮 后 的 最 终 显 示 结 果 。 从 例 4-1 中 可 以 看 出 ,在 用 浏览 器 加 载 HTML 文件 时 ， 
是 从 文件 头 向 后 解释 并 处 理 HTML 文档 的 。 

(3) 在 过 script language 二 "JavaScript" 祖 ... 达 /script 记 中 的 程序 代码 有 大 、 小 写 之 
分 ,例如 将 document. write() 写 成 Document. write() ,程序 将 无 法 正确 执行 。 


4.2.2 链接 脚本 文件 


如 果 已 经 存在 一 个 脚本 文件 (以 js 为 扩展 名 ) , 则 可 以 使 用 script 标记 的 src 属性 引 
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用 外 部 脚本 文件 的 URL。 采 用 引用 脚本 文件 的 方式 ,可 以 提高 程序 代码 的 利用 率 。 其 格 
式 如 下 : 


<head> 


< script type= "text/javascript" src= "脚本 文件 名 .js">< /script> 
号 
其 中 ,type 二 "text/javascript" 属 性 定义 文件 的 类 型 是 javascript。src 属性 定义 . js 文 
件 的 URL。 
如 果 使 用 src 属性 , 则 浏览 器 只 使 用 外 部 文件 中 的 脚本 ,并 忽略 任何 位 于 二 script>.… 
三 /script 二 之 间 的 脚本 。 肢 本 文件 可 以 用 任何 文本 编辑 器 (如 记事 本 ) 打 开 并 编辑 ,一 般 
脚本 文件 的 扩展 名 为 . js, 内容 是 脚本 ,不 包含 HTML 标记 。 其 格式 如 下 : 


Javascript 语言 代码 ; 1/ 注释 





avescript 语 言 代码 5 
例如 ,将 例 4-1 改 为 链接 脚本 文件 ,运行 过 程 和 结果 与 例 4-1 相同 。 


<htm> 
< head> 
<title> Javascript 示例 < /title> 
< Script type= "text/javascript" src= "test.js"> < /script> 
<!--URL 为 test.js --> 
< /head> 
<body> 
<h3 style= "font: 12pt; font- family: 黑体 '; color: red; text- align: 
center"> 努 力 , 奋 斗 ! < /h3> 
< /body> 
</htm> 


脚本 文件 test.js 的 内 容 如 下 : 


gocument .write ("Javascript 例子 !"); 
alert ("欢迎 进入 Javascript 世界 !"); 


4.2.3 在 HTML 标签 内 添加 脚本 


可 以 在 HTML 表单 的 输入 标签 内 添加 脚本 ,以 响应 输入 的 事件 。 

【 例 4-2】 在 标签 内 添加 JavaScript 的 脚本 ,本 例文 件 4-2. html 在 浏览 器 中 显示 的 
效果 如 图 4-3 和 图 4-4 所 示 。 

代码 如 下 : 


<html> 
<head>< title> Javascript 示例 < /title>< /head> 
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国 DAweb\ch4\4-2.html Drox|r 
励 Jjavascrip 奈 例 x ml 
JavaScript 例 子 ! 
EE 
努力 ， 奋斗 ! 
R100% ~ 
4-3 初始 显示 
[Eas 
V3) paweb\chaa-2.htm! Prox| 价 容 涡 
钨 JavaScrip 奈 例 省 
JavaScript 例 子 ! 
[ 单 击 此 按 乌 J 
企 欢迎 进入 javaScript 世 界 ! 
图 4-4 例 4-2 的 运行 结果 
<body> 
Javascript 例子 ! 
< fomm 








< input type= "button" onclick= "Javascript: alert (' 欢 迎 进入 Javascript 世 


界 1');" value=" 单 击 此 按钮 号 
< /fom> 
<h3 style= "font: 12pt; font- family: "黑体 '; color: red; 
center> 努 力 ,奋斗 ! < /3> 
< /body> 
< /him> 


4.2.4 多 脚本 网 页 


在 一 个 HTML 文档 中 ,可 以 有 多 个 脚本 程序 块 , 它 
们 可 以 放 在 二 head 之 和 二 body 二 中 ,浏览 器 将 依次 
执行 。 

【 例 4-3】 在 下 面 HTML 文档 中 有 3 段 脚本 代码 ， 
本 例文 件 4-3. html 在 浏览 器 中 显示 的 效果 如 图 4-5 
所 示 。 





text- align: 








、 下 |] DAwebNch4\4-3ht PD -OY 


站 DA\web\ch4\4-3.html X 








图 4-5 多 脚本 网 页 
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代码 如 下 : 


< Script language= "JavaScript"> 
document.write(" 第 二 个 脚本 "); 

</script> 

<hr> 

< script language= "JavaScript"> 
gocument.write(" 第 三 个 脚本 "); 

< /script> 

< /pody> 
< /htm> 


43 ” JavaScript 的 基本 数据 类 型 和 表达 式 


JavaScript 脚本 语言 同 其 他 计算 机 语言 一 样 , 有 它 自 身 的 基本 数据 类 型 .运算 符 和 表达 式 。 
4.3.1 基本 数据 类 型 


JavaScript 有 4 种 基本 的 数据 类 型 。 

number( 数 值 ) 类 型 : 可 为 整数 和 浮 点 数 。 在 程序 中 并 没有 把 整数 和 实数 分 开 , 这 两 
种 数据 可 在 程序 中 自由 转换 。 整 数 可 以 为 正 数 .0 或 者 负数 , 浮 点 数 可 以 包含 小 数 点 ,也 
可 以 包含 一 个 “e”( 大 小 写 均 可 ,表示 10 的 寡 ) ,或 者 同时 包含 这 两 项 。 

string( 字 符 ) 类 型 : 字符 是 用 单 引号 “" 或 双 引 号 “"” 来 说 明 的 。 

boolean( 布 尔 ) 类 型 : 布尔 型 的 值 为 true 或 false。 

object( 对 象 ) 类 型 : 对 象 也 是 JavaScript 中 的 重要 组 成 部 分 ,用 于 说 明 对 象 。 

JavaScript 的 基本 类 型 中 的 数据 可 以 是 常量 ,也 可 以 是 变量 。 由 于 JavaScript 采用 弱 
类 型 的 形式 ,因而 一 个 数据 的 变量 或 常量 不 必 首先 作 声明 ,而 是 在 使 用 或 赋值 时 自动 确定 
其 数据 的 类 型 。 也 可 以 先 声 明 该 数据 的 类 型 。 

JavaScript 还 有 一 个 特殊 的 数据 类 型 undefined( 未 定义 ) ,undefined 类 型 是 指 一 个 变 
量 被 创建 后 ,还 没有 赋予 任何 初 值 .这 时 该 变量 没有 类 型 ,被 称 为 未 定义 的 ,在 程序 中 直接 
使 用 会 发 生 错 误 。 





常量 通常 又 称 为 字面 常量 , 它 是 不 能 改变 的 数据 。 
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1. 基本 常量 


(1) 字符 型 常量 。 使 用 单 引 号 “" 或 双 引 号 “"” 括 起 来 的 一 个 或 几 个 字符 ,如 "123"、 
‘labcABC123'."This is a book of JavaScript" 等 。 

(2) 数值 型 常量 。 整 型 常量 : 整 型 常量 可 以 使 用 十 进 制 .十 六 进 制 \. 八 进 制 表示 
其 值 。 

实 型 常量 : 实 型 常量 由 整数 部 分 加 小 数 部 分 表示 ,如 12. 32、193. 98。 可 以 使 用 科学 
或 标准 方法 表示 ,如 6E8、2. 6e5 等 。 

(3) 布尔 型 常量 。 布 尔 常 量 只 有 两 个 值 : True 或 False。 它 主要 用 来 说 明 或 代表 一 
种 状态 或 标志 ,以 说 明 操作 流程 。JavaScript 只 能 用 True 或 False 表示 其 状态 ,不 能 用 1 
或 0 表示 。 

JavaScript 除 上 面 3 种 基本 常量 外 ,还 有 两 种 特殊 的 常量 值 。 


2. 特殊 常量 


(1) 空 值 。JavaScript 中 有 一 个 空 值 null, 表 示 什 么 也 没有 。 例 如 ,试图 引用 没有 定 
义 的 变量 , 则 返回 一 个 null 值 。 

(2) 控制 字符 。 与 C/C++ 语言 一 样 ,JavaScript 中 同样 有 以 反 斜 杠 “\” 开 头 的 不 可 显 
示 的 特殊 字符 ,通常 称 为 控制 字符 (这 些 字符 前 的 “\” 叫 转 义 字符 )。 举 例如 下 。 

\b: 表示 退 格 \f: 表示 换 页 \n: 表示 换行 \r: 表示 回 车 

\t: 表示 Tab 符号。 \': 表示 单 引 号 本 身  \": 表示 双 引 号 本 身 


4.3.3 变量 


变量 用 来 存放 程序 运行 过 程 中 的 临时 值 ,这样 在 需要 用 这 个 值 的 地 方 就 可 以 用 变量 
来 代表 。 对 于 变量 必须 明确 变量 的 命名 、 变 量 的 类 型 .变量 的 声明 及 变量 的 作用 域 。 


1. 变量 的 命名 


JavaScript 中 的 变量 命名 同 其 他 计算 机 语言 非常 相似 ,变量 名 称 的 长 度 是 任意 的 ,但 
要 区 分 大 小 写 。 另 外 ,还 必须 遵循 以 下 规则 。 

(1) 第 一 个 字符 必须 是 字母 (大 小 写 均 可 )、 下划线 ” ?或 美元 符 “$ ”。 

(2) 后 续 字 符 可 以 是 字母 ,数字 .下 划 线 或 美元 符 。 除 下 划 线 ” "字符 外 ,变量 名 中 不 
能 有 空格 ,以 及 “十 “一 ”“,” 或 其 他 特殊 符号 。 

(3) 不 能 使 用 JavaScript 中 的 关键 字 作为 变量 。 在 JavaScript 中 定义 了 40 多 个 关键 
字 , 这 些 关键 字 是 JavaScript 内 部 使 用 的 ,如 var、int、double、true, 它 们 不 能 作为 变量 。 

在 对 变量 命名 时 ,最 好 把 变量 的 意义 与 其 代表 的 意思 对 应 起 来 ,以 方便 记忆 。 


2. 变量 的 类 型 


JavaScript 是 一 种 对 数据 类 型 变量 要 求 不 太 严 格 的 语言 ,所 以 不 必 声 明 每 一 个 变量 
9 


Web 前 端 开发 实例 教程 一 HIM 5+ JavaScript + jQuery 





的 类 型 ,但 在 使 用 变量 之 前 先进 行 声明 是 一 种 好 的 习惯 。 
变量 的 类 型 是 在 赋值 时 根据 数据 的 类 型 来 确定 的 ,变量 的 类 型 有 字符 型 数值 型 .布尔 型 
3. 变量 的 声明 


JavaScript 变量 可 以 在 使 用 前 先 作 声明 ,并 可 赋值 。 通 过 使 用 var 关键 字 对 变量 作 声 
明 。 对 变量 作 声明 的 最 大 好 处 就 是 能 及 时 发 现代 码 中 的 错误 ,因为 JavaScript 是 采用 动 
态 编译 的 ,而 动态 编译 不 易 发 现代 码 中 的 错误 ,特别 是 变量 命名 方面 。 

变量 的 声明 和 赋值 语句 var 的 语法 如 下 : 


var 变量 名 称 1 FF 初始 值 1]， 变量 名 称 2 [= 初始 值 2] .…; 
一 个 var 可 以 声明 多 个 变量 ,其 间 用 *,” 分 隔 。 
4. 变量 的 作用 域 


变量 的 作用 域 是 变量 的 重要 概念 。 在 JavaScript 中 同样 有 全 局 变量 和 局 部 变量 ,全 
局 变量 定义 在 所 有 函数 体 之 外 ,其 作用 范围 是 全 部 函数 ;而 局 部 变量 定义 在 函数 体 之 内 ， 
只 对 该 函数 可 见 ,而 对 其 他 函数 不 可 见 。 


4.3.4 运算 符 和 表达 式 


在 定义 完 变 量 后 ,可 以 对 变量 进行 赋值 .计算 等 一 系列 操作 ,这 一 过 程 通常 由 表达 式 
来 完成 ,可 以 说 它 是 变量 ,常量 和 运算 符 的 集合 ,因此 表达 式 可 以 分 为 算术 表述 式 .字符 串 
表达 式 ,布尔 表达 式 。 

运算 符 是 完成 操作 的 一 系列 符号 ,在 JavaScript 中 有 算术 运算 符 、 ee 比 
较 运 算 符 ,布尔 运算 符 等 。 运 算 符 又 分 为 双 目 运算 符 和 单 目 运算 符 。 单 目 运算 符 只 
个 操作 数 , 其 运算 符 可 在 前 或 后 。 双 目 运算 符 格式 如 下 : 


操作 数 1 运算 符 操作 数 2 
即 双 目 运算 符 由 两 个 操作 数 和 一 个 运算 符 组 成 。 例 如 ,3 十 5 或 "This" 十 "that "等 
1. 算术 运算 符 


JavaScript 中 的 算术 运算 符 有 双 目 运算 符 和 单 目 运算 符 。 
双 目 运算 符 : 十 (加 ) ,一 ( 减 )、x* ( 乘 )、/( 除 )、%( 取 模 )。 
单 目 运算 符 : 十 十 ( 递 加 1). 一 一 (递减 1)。 


2. 字符 串 运 算 符 

字符 串 运 算 符 “十 ”用 于 连接 两 个 字符 串 。 例 如 , "abc" 十 "123"。 

3. 比较 运算 符 

比较 运算 符 首 先 对 操作 数 进行 比较 ,然后 再 返回 一 个 true 或 false 值 。 有 6 个 比较 
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运算 符 : 过 (小 于 )` 雪 一 (小 于 等 于 )、 字 (大 于 )、 之 一 (大 于 等 于 ) .一 一 (等 于 )、! 一 (不 


4. 布尔 运算 符 


在 JavaScript 中 增加 了 几 个 布尔 逻辑 运算 符 : !( 取 反 )、& 二 (与 之 后 赋值 )、&.( 人 逻辑 
与 )、| 二 (或 之 后 赋值 )、| (逻辑 或 )、 一 ( 蜡 或 之 后 赋值 ) (逻辑 异 或 ).?:( 三 目 操作 符 )、 
| (或 )、==( 等 于) | 一 (不 等 于 ) 。 

其 中 三 目 操作 符 主要 格式 如 下 : 

操作 数 ?结果 1; 结果 2 

若 操作 数 的 结果 为 真 , 则 表达 式 的 结果 为 结果 1 ,否则 为 结果 2。 

5. 位 运算 符 


位 运算 符 分 为 位 逻辑 运算 符 和 位 移动 运算 符 。 
位 逻辑 运算 符 有 : &( 位 与 )、| (位 或 )“^( 位 异 或 ) 一 (位 取 反 ) .一 (位 取 补 ) 。 
位 移动 运算 符 有 : 二 二 ( 左 移 ) .二 二 ( 右 移 ) ,二 二 二 ( 右 移 , 零 填充 )。 


6. 运算 符 的 优先 顺序 


表达 式 的 运算 是 按 运算 符 的 优先 级 进行 的 。 下 列 运算 符 按 其 优先 顺序 由 高 到 低 
排列 。 

算术 运算 符 ; 十 十 .一 一 .* 、/、%、 十 .一 。 

字符 串 运算 符 : 十 。 

位 移动 运算 符 : = 二、 二、 二 >。 

位 逻辑 运算 符 ; & |、 人 一、 一 。 

比较 运算 符 ; 二 .二 = 这 ,= ,==,! 

布尔 运算 符 : !、&=、&、|=、| .人 ^==、^.?;.,||、 虽 








中 








44 JavaScript 的 程序 结构 


变量 如 同 语言 中 的 单词 ,表达 式 如 同 语言 中 的 词组 ,而 只 有 语句 才 是 语言 中 完整 的 名 
子 。 在 任何 编程 语言 中 ,程序 都 是 通过 语句 来 实现 的 。 在 JavaScript 中 包含 完整 的 一 组 
编程 语句 ,用 于 实现 基本 的 程序 控制 和 操作 功能 。 

在 JavaScript 中 ,每 条 语句 后 面 以 一 个 分 号 结尾 。JavaScript 的 要 求 并 不 严格 ,在 编 
写 脚 本 语言 时 ,语句 后 面 也 可 以 不 加 分 号 。 建 议 加 上 分 号 ,这 是 一 种 良好 的 编程 习惯 。 

JavaScript 脚本 程序 是 由 控制 语句 、 函 数 、 对 象 .方法 、 属 性 等 组 成 的 。JavaScript 所 
提供 的 语句 分 为 以 下 几 大 类 。 
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4.4.1 简单 语句 


1. 赋值 语句 

赋值 语句 的 功能 是 把 右边 表达 式 赋值 给 左边 的 变量 。 其 格式 如 下 : 

变量 名 = 表达 式 ; 

像 C 语 言 一 样 ,JavaScript 也 可 以 采用 变形 的 赋值 运算 符 , 如 x 十 二 y 等 同 于 x 一 x 十 
y, 其 他 运算 符 也 一 样 。 

2. 注释 语句 

在 JavaScript 的 程序 代码 中 ,可 以 插入 注释 语句 以 增加 程序 的 可 读 性 。 注 释 语句 有 
单行 注释 和 多 行 注释 之 分 。 

单行 注释 语句 的 格式 如 下 : 

// 注 释 内 容 

多 行 注释 语句 的 格式 如 下 : 

/* 注释 内 容 

注释 内 容 * / 

3. 输出 字符 串 

在 JavaScript 中 常用 的 输出 字符 串 的 方法 是 利用 document 对 象 的 write( ) 方 法 、 
window 对 象 的 alert() 方 法 。 

(1) 用 document 对 象 的 write() 方 法 输出 字符 串 。document 对 象 的 write() 方 法 的 
功能 是 向 页 面 内 写 文本 ,其 格式 如 下 : 

document.write 他 符 串 1, 字符 串 2, .) ; 


(2) 用 window 对 象 的 alert() 方 法 输出 字符 串 。window 对 象 的 alert() 方 法 的 功能 
是 弹出 提示 对 话 框 ,其 格式 如 下 : 


alert( 字 符 串 ); 

4. 输入 字符 串 

在 JavaScript 中 常用 的 输入 字符 串 的 方法 是 利用 window 对 象 的 prompt() 方 法 以 及 
表单 的 文本 框 。 

(1) 用 window 对 象 的 prompt() 方 法 输入 字符 串 。window 对 象 的 prompt() 方 法 的 
功能 是 弹出 对 话 框 ,让 用 户 输入 文本 ,其 格式 如 下 : 


prampt (提示 字符 串 , 默认 值 字符 串 ); 
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例如 ,下 面 的 代码 用 prompt() 方 法 得 到 字符 串 ,然后 赋值 给 变量 name。 


<htm> 
<body> 
< script language= "JavaScript"> 
var name=prompt ("请 输入 您 的 姓名 : ",") ; 
document .write (" 您 好 !"+name) ; 
< /script> 
< /pody> 
< /htm> 
(2) 用 文本 框 输入 字符 串 。 使 用 Blur 事件 和 onBlur 事件 处 理 程序 ,可 以 得 到 在 文本 
框 中 输入 的 字符 串 。Blur 事件 和 onBlur 事件 的 具体 解释 可 参考 第 5 章 中 事件 处 理 程序 
的 相关 内 容 。 
【 例 4-4】 下 面 的 代码 执行 时 ,在 文本 框 中 输入 的 文本 将 在 对 话 框 中 输出 ,本 例文 件 
4-4. html 在 浏览 器 中 的 显示 效果 如 图 4-6 所 示 。 


图 bsAwebvch4aM4-4htn PD OX| 0 ve 
乱用 六 本本 党 入 x 


请 输入 ， 字 窗 电子 Ok 
































全 您 给 入 的 内 容 是 : 字 亩 电子 OK 














图 4-6 例 4-4 的 页 面 显示 效果 


代码 如 下 : 


<html> 
< head> 
<title> 用 文本 框 输入 < /title> 
< script language= "JavaScript"> 
fimction test (str) { 
alert ("您 输入 的 内 容 是 : "+ str); 
} 
< /script> 
< /head> 
<body> 
< fom name= "chform' method= "post"> 
< 户 请 输入 : 
< input type= "text" name= "textname" onBlur= "test (this.value)" 
value="™ size="10> < /p> 
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【 例 4-5】 下 面 的 代码 执行 时 , 单 击 * 计 算 ” 按 钮 可 得 到 算术 表达 式 的 值 ,本 例文 
件 4-5. html 在 浏览 器 中 的 显示 效果 如 图 4-7 所 示 。 


EB) Dweb\ch4\4-Shtin PD - OX 
钨 DAweb\ch4\4-5.html x 


输入 一 个 算术 表达 式 6-3*2-3 


























9 结果 为 9 





图 4-7 例 4-5 的 页 面 显示 效果 


代码 如 下 : 


<html> 
<head> 
< script language= "JavaScript"> 
fimction cl (form){ 
myfom.results.value= eval (nyform.entry.value)7 
// 得 到 文本 框 的 值 : 表单 名 .文本 框 名 .value 
} 
< /script> 
< /head> 
<body> 
< form name= "myfomm" method= "post"> 
输入 一 个 算术 表达 式 
< input type= "text" name= "entry" value= "6+ 3* 2- 3><p> 
< input type= "button" value= "计算 " onclick= "cl (this.fom);"> 
结果 为 
< input type= "text" name= "results" onFocus= "this.blur();"><p> 
</form 
< /body> 
<jhtm> 


4.4.2 程序 控制 流程 


1. 条 件 语句 


JavaScript 提供 了 if ,if else 和 switch 这 3 种 条 件 语 句 . 条 件 语句 也 可 以 内 套 。 
1) 让 语 铝 
让 语句 是 最 基本 的 条 件 语句 , 它 的 格式 与 C++ 一 样 ,其 格式 如 下 : 
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“条 件 ” 是 一 个 关系 表达 式 ,用 来 实现 判断 , 条件” 要 用 () 括 起 来 。 如 果 * 条 件 ” 的 值 为 
true, 则 执行 {} 里 面 的 语句 ,和 否则 跳 过 计 语 句 执行 后 面 的 语句 。 如 果 语 句 段 只 有 一 句 ,可 
以 省 略 (}, 例 如: 


if(==1) y=6; 


【 例 4-6】 本 例 弹出 一 个 确认 框 ,如 果 用 户 单 击 “ 确 定 ” 按 钮 , 则 网 页 中 显示 “OK1!1”; 
如 果 单 击 “ 取 消 ” 按 钮 , 则 网 页 中 显示 “Cancel!”, 本 例文 件 4-6. html 在 浏览 器 中 的 显示 效 
果 如 图 4-8 所 示 。 
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CDIoNwebha46hml P-ox| 介 高 售 
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成 100% ~ 








图 4-8 例 4-6 的 页 面 显示 效果 


代码 如 下 : 


<html> 
<body> 
< script> 
var userChoice= window.confimm(" 请 选择 “确定 "或 “取消 ”"); 
if (userChoioce==true) { 
cocument .write ("OK!"); 
} 
if (oserchoice== false) { 
cocument .write ("Cancel!"); 
' 
</script> 
< /body> 
< /html> 


【说 明 】 其 中 的 window. confirm(" 提 示 文 本 ") 是 window 对 象 的 confirm 方法 ,其 
功能 是 弹出 确认 框 ,如 果 单 击 “ 确 定 ” 按 钮 .其 函数 值 为 true; 单 击 “ 了 取消” 按钮 ,其 函数 值 为 
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false。 
也 可 以 使 用 *?” 条 件 测试 运算 符 ,其 代码 如 下 : 
< Script> 
var userChoice=window.confimm(" 请 选择 “确定 ”或 “取消 ”"); 
Var result= (userChoioe== true) ? "CK!™ : "Canocel!™; 
document.write (result); 

< /script> 

2) if else 语句 

if else 语句 的 格式 如 下 : 

址 (条 件 ) 

语句 段 1; 
else 
语句 段 2; 

车 “条 件 ” 为 true, 则 执行 语句 段 1; 否则 执行 语句 段 2.“ 条 件 ? 要 用 () 括 起 来 。 若 if 
后 的 语句 段 有 多 行 , 则 必须 使 用 {} 将 其 括 起 来 。 

3) switch 语句 

分 支 语句 switch 根据 变量 取 值 的 不 同 采取 不 同 的 处 理 方法 。switch 语句 的 格式 如 下 : 

switch (变量 ) 

{ case 特定 数值 1 : 

语句 段 1 
break; 
case 特定 数值 2 : 
语句 段 2; 
break; 
aetault : 
语句 段 3; 

} 

“变量 ?要 用 () 括 起 来 。case 必须 用 (} 括 起 来 。 语 句 段 即使 是 由 多 个 语句 组 成 的 ,也 
不 能 用 {} 括 起 来 。 

当 switch 中 变量 的 值 等 于 第 一 个 case 语句 中 的 特定 数值 时 ,执行 其 后 的 语句 段 , 执 
行 到 break 语句 时 ,直接 跳 离 switch 语句 。 如 果 变 量 的 值 不 等 于 第 一 个 case 语句 中 的 特 
定数 值 , 则 判断 第 二 个 case 语句 中 的 特定 数值 。 如 果 所 有  。 - 
的 case 都 不 符合 , 则 执行 default 中 的 语句 。 如 果 省 略 Ge Ee 

Ej 








default 语句 , 当 所 有 case 都 不 符合 时 , 则 跳 离 switch ,什么 a A 
都 不 执行 。 每 条 case 语句 中 的 break 是 必需 的 ;如 果 没 有 xl 
break 语句, 将 继续 执行 下 一 个 case 语句 的 判断 。 章 生 ， 

【 例 4-7】 让 语 句 和 switch 语句 的 用 法 ,本 例文 件 4-7. html 
在 浏览 器 中 的 显示 效果 如 图 4-9 所 示 。 

代码 如 下 : 4-9 例 4-7 的 页 面 显示 效果 
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<htm> 
<head> 
<title> if and switch 示 例 < /title> 
< /head> 
<body> 
< script language= "JavaScript"> 
Var ly? 
gocument .write ("=1"); 
document .write ("< br> "); 
if (=1) 
document.write ("x 等 于 1"); 
else 
document .write ("x 不 等 于 1"); 
Gocument .write ("< br> "); 
switch (x) 
{ case 0 : document.write("x 等 于 0"); 
break; 
case 1 : document.write(x 是 等 于 1"); 
break; 
default : document.write("x 不 等 于 0 或 1"); 
} 
< /script> 
< /body> 
< /html> 


2. 循环 语句 


JavaScript 中 提供 了 多 种 循环 语句 ,有 for、while 和 do while 语句 ,还 提供 用 于 跳出 
循环 的 break 语句 ,用 于 终止 当前 循环 并 继续 执行 下 一 轮 循环 的 continue 语句 ,以 及 用 于 
标号 语句 (label) 。 

1) for 循环 语句 

for 循环 语句 的 格式 如 下 : 

for( 初 始 化 ; 条 件 ; 增 量 ) 

语句 段 ; 
} 

for 实现 条 件 循环 , 当 “ 条 件 ” 成 立时 ,执行 语句 段 ,否则 跳出 循环 体 。 

for 循环 语句 的 执行 步骤 如 下 。 

(1) 执行 “初始 化 ?部 分 ,给 计数 器 变量 赋 初 值 。 

(2) 判断 “条 件 ? 是 否 为 真 ,如 果 为 真 则 执行 循环 体 , 和 否则 就 退出 循环 体 。 

(3) 执行 循环 体 语句 之 后 ,执行 “ 增 量 ”部 分 。 

(4) 重复 步骤 (2) 和 步骤 (3) ,直到 退出 循环 。 

JavaScript 也 允许 循环 的 嵌 套 ,从 而 实现 更 加 复杂 的 应 用 。 

【 例 4-8】 使 用 for 语句 在 网 页 中 输出 “* ”号 组 成 一 个 三 角形 ,本 例文 件 4-8. html 在 
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浏览 器 中 的 显示 效果 如 图 4-10 所 示 。 
代码 如 下 : 





本 到 外 到 E3 
咎 Di\web\ch4\4-8.ht D ~ 














<htm> 





<head> 
<title> for 语 句 < /title> 
< /head> 
<body> 
< script language= 'javascript' 
type= 'text/javascript'> 图 4-10 例 4-8 的 页 面 显示 效果 
Var XrY7 
for (x=0; x<5; x+) //x 为 行 控制 变量 ,5 行 
{ for (时 0 y= (5-%); yt+) /WY 为 当前 行 的 空格 个 数 
document .write ('grbep'); //anbsp 是 空格 的 字符 
for (二 1; i<= (2x x+]); 计 +) /Vi 为 当前 行 “* ”的 个 数 
document .write('x '); 
document .write('<br> ') // 换 行 
} 
< /script> 
< /pody> 
</htm> 


2) while 循环 语句 

while 循环 语句 的 格式 如 下 : 

while( 条 件 ) 

' 语句 段 ; 

} 

当 条 件 表达 式 为 真 时 就 执行 循环 体 中 的 语句 。“ 条 件 ” 要 用 ( ) 括 起 来 。 

while 语句 的 执行 步骤 如 下 。 

(1) 计算 “条 件 ” 表 达 式 的 值 。 

(2) 如 果 “ 条 件 ”" 表 达 式 的 值 为 真 , 则 执行 循环 体 ,否则 跳出 循环 。 

(3) 重复 步骤 (1) 和 步骤 (2) ,直到 跳出 循环 。 

有 时 可 用 while 语句 代替 for 语句 。while 语句 适合 条 件 复杂 的 循环 ,for 语句 适合 已 
知 循环 次 数 的 循环 。 

【 例 4-9】 在 下 面 程序 中 ,如 果 单 击 * 取 消 ?按钮 ,将 再 次 让 用 户 选 择 , 直 到 单 击 * 确 
定 ” 按 钮 才能 退出 选择 ,然后 在 网 页 中 显示 “你 最 终 选 定 的 是 OK1”, 本 例文 件 4-9. html 在 
浏览 器 中 的 显示 效果 如 图 4-11 所 示 。 

代码 如 下 : 











<body> 
< Script> 
var result 一 window.confim(" 请 选择 “确定 ”或 “取消 ”"); 
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四 
国 国 pswebehaehmP- cx] 而 羡 受 
C while 语 句 x 











你 最 终 选 定 的 是 OK! 








胞 100% ~ 











图 4-11 例 4-9 的 页 面 显 示 效 果 
while (result==false) { 
result=window.confim(" 请 选择 “确定 ”或 “取消 ”"); 
} 
document .write(" 你 最 终 选 定 的 是 Ok!"); 
< /script> 

< /body> 
3) do while 语句 
do while 语句 是 while 的 变 体 , 其 格式 为 : 


do 


语句 段 ; 

we 人 伯 ) 

do while 的 执行 步骤 如 下 。 

(1) 执行 循环 体 中 的 语句 。 

(2) 计算 条 件 表达 式 的 值 。 

(3) 如 果 条 件 表达 式 的 值 为 真 , 则 继续 执行 循环 体 中 的 语句 ,否则 退出 循环 。 

(4) 重复 步骤 (1) 和 步骤 (2) ,直到 退出 循环 。 

do while 语句 的 循环 体 至 少 要 执行 一 次 ,而 while 语句 的 循环 体 可 以 一 次 也 不 执行 。 

不 论 使 用 哪 一 种 循环 语句 ,都 要 注意 控制 循环 的 结束 标志 ,人 避免 出 现 死 循环 。 

4) 标号 语句 

label 语句 用 于 为 语句 添加 标号 。 在 任意 语句 前 放 上 标号 ,都 可 为 该 语句 指定 一 个 标 
。 其 格式 如 下 : 


标号 名 称 : 语句 ; 
label 语句 常常 用 于 标记 一 个 循环 、switch 或 让 语句 , 且 与 break 或 continue 语句 联 
合 使 用 。 


业 
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5) break 语句 


break 语句 的 功能 是 无 条 件 跳 出 循环 结构 或 switch 语 


句 。 一 般 break 语句 是 单独 使 用 的 ,有 时 也 可 在 其 后 面 加 和 
一 个 语句 标号 ,以 表明 跳出 该 标号 所 指定 的 循环 体 ,然后 | 全 es 


执行 循环 体 后 面 的 代码 。 


【 例 4-10】 循环 及 break、label 语句 的 使 用 ,本 例文 
件 4-10. html 在 浏览 器 中 的 显示 效果 如 图 4-12 所 示 。 


代码 如 下 : 


<html> 
<head> 














i=1 j= 


=1 
1 
2 
=2 
=2 
3 


1 
=2 
=3 
1 
=2 
=3 
1 


i=l j 
i=1 j= 
i 天 
i=2 j= 
i=2 j 
i=3 j 








图 4-12 例 4-10 的 页 面 显示 效果 


<title> break 语 句 < /title> 


< /head> 
<body> 


< script language= 'javascript' type= 'text/javascript'> 


<!-- 

var i; 

forLoopl: 
for(i=1;i< 10;i++) 
{ 


for(j=1;j<10;j++) 


{ 


ocument .write ("i= "+ i+ "gnbsp;"); 
ocument .write("j= "+j+ "<br>"); 


if(j== 3) break; 


/跳出 嵌 套 的 第 二 层 循环 


证 (二 =3) break forLoopl; // 距 出 顶层 循环 








全 Dweb\ch4\4-11t PD ~ 
钨 continue 和 break 的 用 法 x 


continue 语 名 1 3 5 7 9 
break 语 句 1 2 














6) continue 语句 

continue 语句 的 功能 是 结束 本 轮 循环 , 跳 转 到 循环 的 
开始 处 ,从 而 开始 下 一 轮 循环 ;而 break 则 是 结束 整个 循 
环 。continue 可 以 单独 使 用 ,也 可 以 与 语句 标号 一 起 
使 用 。 

【 例 4-11】 continue 和 break 语句 的 用 法 ,在 网 页 上 


图 4.13 例 411 的 页 面 显示 效果 输出 1 一 10 的 数字 后 跳出 循环 ,本 例文 件 4.11. html 在 济 


代码 如 下 : 


<html> 
<head> 


览 器 中 的 显示 效果 如 图 4-13 所 示 。 


<title> continue 和 break 的 用 法 < /title> 
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</head> 
<body> 
< script language= 'javascript' type= 'text/javascript'> 
Var X7 
document .write('continue 语 名 '); 
for (x= 1;x< 10;x++) 
{ 寺 ( 驹 2==0) continve;  // 遇 到 偶数 则 跳出 此 次 循环 ,进入 下 次 循环 
dbcument .write (x+ '&rbsp'); 
aocument.write('<br> '); 
aocument.write ("break 语 句 '); 
for (x=1;x<=10;xt+) 
{ 证 (%3=0) break; // 遇 到 能 被 3 整除 ,结束 整个 循环 
Gocument .write (x+ 'g&nbsp'); 
} 
< /script> 
< /body> 
< /htm> 
【说 明 】 break 语句 使 循环 从 for 或 while 中 跳出 ,continue 使 跳 过 循环 内 剩余 的 语 
句 而 进入 下 一 次 循环 。 


45 函 数 


在 JavaScript 中 ,函数 是 能 够 完成 一 定 功能 的 代码 块 , 它 可 以 在 脚本 中 被 事件 和 其 他 
语句 调用 。 一 般 在 编写 脚本 时 , 当 有 一 段 能 够 实现 特定 功能 的 代码 需要 经 常 使 用 时 ,就 要 
考虑 编写 一 个 函数 来 实现 这 个 功能 以 代替 这 段 代 码 。 当 要 用 到 这 个 功能 时 , 即 可 直接 调 
用 这 个 函数 ,而 不 必 再 写 这 段 代 码 。 当 一 段 代 码 很 长 ,需要 实现 很 多 功能 时 ,就 可 根据 这 
段 代 码 实现 的 功能 而 划分 成 几 个 功能 单一 的 函数 , 既 可 以 提高 程序 的 可 读 性 ,也 利于 脚本 
的 编写 和 调试 。 


4.5.1 函数 的 定义 


JavaScript 并 不 区 分 函数 (Function) 和 过 程 (Procedure) ,在 JavaScript 中 只 有 函数 。 
也 就 是 说 ,JavaScript 中 的 函数 同时 具有 函数 和 过 程 的 功能 。 函 数 是 已 命名 的 代码 块 , 代 
码 块 中 的 语句 被 作为 一 个 整体 引用 和 执行 。 函 数 可 以 使 用 参数 来 传递 数据 ,也 可 以 不 使 
用 参数 。 函 数 在 完成 功能 后 可 以 有 返回 值 , 也 可 以 不 返回 任何 值 。 

JavaScript 遵循 先 定义 函数 ,后 调用 函数 的 规则 。 函 数 的 定义 通常 放 在 HTML 文档 
头 中 ,也 可 以 放 在 其 他 位 置 ,但 最 好 放 在 文档 头 , 这 样 就 可 以 确保 先 定义 后 使 用 。 

定义 函数 的 格式 如 下 : 


function 函数 名 (参数 1, 参数 2,.…) 
103 


Web 前 端 开发 实例 教程 一 HIM 5+ JavaScript + jQuery 





retum 表达 式 ; //retum 语 句 指明 被 返回 的 值 


函数 名 是 指 调用 函数 时 引用 的 名 称 , 一 般 用 能 够 描述 函数 实现 功能 的 单词 来 命名 ,也 
1 a 可 以 用 多 个 单词 组 合 命名 。 参 数 是 调用 函数 时 接收 传人 
Oe 数据 的 变量 名 ,可 以 是 常量 、 变 量 或 表达 式 , 是 可 选 的 。 可 
名 BW xj | 以 使 用 参数 列表 ,向 函数 传递 多 个 参数 ,使 在 函数 中 可 以 
Hello, Hi 使 用 这 些 参 数 。{} 中 的 语句 是 函数 的 执行 语句 , 当 函 数 被 
调用 时 执行 。 如 果 返 回 一 个 值 给 调用 函数 的 语句 ,应 该 在 
代码 块 中 使 用 return 语句 。 

图 4-14 例 4-12 的 页 面 显示 效果 【 例 4-12】 在 JavaScript 中 使 用 函数 的 例子 ,本 例文 

件 4-12. html 在 浏览 器 中 的 显示 效果 如 图 4-14 所 示 。 


























代码 如 下 ， 
<html> 
<head> 
<title> 使 用 函数 < /title> 
< Script language= "javascript" type= "text/javascript"> 
finction hello() // 定 义 没 有 参数 的 函数 


{ 
Gocument .write ("Hello, "); 


} ”// 本 函数 没有 返回 值 
finction message (message) // 定 义 有 一 个 参数 的 函数 
{ 
document .write (message); 
} // 本 函数 没有 返回 值 
< /script> 
< /head> 
<body> 
< script language= "javascript" type= "text/javascript"> 
hello(); // 调 用 无 参数 的 函数 ,本 函数 没有 返回 值 
Tessage ("Hi"); // 调 用 有 参数 的 函数 ,本 函数 没有 返回 值 
< /script> 
< /pody> 
< /htm> 


【说 明 】 如 果 需 要 函数 返回 值 , 则 要 使 用 return 语句 。 
【 例 4-13】 函数 返回 值 的 示例 ,本 例文 件 4-13. html 在 Ge 








EY] DAweb\ch4\4-13+ PD ~ 




















浏览 器 中 的 显示 效果 如 图 4-15 所 示 。 DN 
代码 如 下 : 200 
<html> 
<head> 
< script languager "JavaSscript"> 图 4-15 例 4-13 的 页 面 显示 效果 
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function multiple (nnberl,ninber?2) { 
Var result= nuriberl * nnmber?2; 
retum result; // 函 数 有 返回 值 
} 
</script> 
< /head> 
<body> 
< script language= "JavaScript"> 
var result=mltiple (10,20); // 调 用 有 返回 值 的 函数 
Gocument .write (result); 
< /script> 
< /body> 
< /htm> 


4.5.2 ”函数 的 调用 


1. 无 返回 值 的 调用 
如 果 函 数 没有 返回 值 或 调用 程序 不 关心 函数 的 返回 值 ,可 以 用 下 面 的 格式 调用 定义 


的 函数 。 


函数 名 (传递 给 函数 的 参数 1, 传递 给 函数 的 参数 2，..J; 
例如 ,在 例 4-12 代码 中 的 “hello();” 和 ”message("Hi"); ?语句 ,由 于 hello() 函 数 没 


有 返回 值 ,所 以 可 以 使 用 这 种 方式 。 


2. 有 返回 值 的 调用 

如 果 调 用 程序 需要 函数 的 返回 结果 , 则 要 用 下 面 的 格式 调用 定义 的 函数 。 
变量 名 = 函数 名 (传递 给 函数 的 参数 1, 传递 给 函数 的 参数 2，.…); 

例如 : 

result=mltiple (10,20); 

对 于 有 返回 值 的 函数 调用 ,也 可 以 在 程序 中 直接 利用 其 返回 的 值 。 例 如 : 
Gocument .write mtiple(10,20))7 

3. 在 超 链接 标记 中 调用 函数 


当 单 击 超 链 接 时 ,可 以 触发 调用 函数 ,有 两 种 方法 。 
(1) 使 用 二 a 二 标记 的 onClick 属性 调用 函数 ,其 格式 如 下 : 


<ahref= 哇 "onclick= "函数 名 (参数 表 )" 吃 热点 文本 < /a> 


(2) 使 用 二 a 二 标记 的 href 属性 ,其 格式 如 下 : 
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【 例 43-14】 本 例 分 别 用 两 种 方法 ,从 超 链接 中 调用 函数 ,函数 的 功能 是 显示 一 个 
alert 对 话 框 , 本 例文 件 4-14. html 在 浏览 器 中 的 显示 效果 如 图 4-16 所 示 。 


习 | 司 bwebvhaM-14html PpP-oxlm oo 
导 Di\web\ch4\4-14.html x 
























































图 4-16 例 4-14 的 页 面 显示 效果 


代码 如 下 : 


<html> 
<head> 
< script language= "JavaScript"> 
finction hello() { 
window.alert ("Hello!"); 
} 
< /script> 
< /head> 
< body> 
<a hre 人 - 趾 " onclick= "hello();"> 通 过 onclick 属 性 调用 函数 < /a> <br> 
<a hre 伍 "javascript: hello(); 吃 通过 href 属 性 调用 函数 < /a> 
< /body> 
< /html> 


4. 在 装载 网 页 时 调用 函数 


有 时 和 希望 在 装载 (执行 ) 一 个 网 页 时 仅 执 行 一 次 JavaScript 代码 ,这 时 可 使 用 一 body 过 
标记 的 onLoad 属性 ,其 代码 格式 如 下 


<head> 
< script language= "JavaScript"> 
functicn 函数 名 (参数 表 ) { 
当 网 页 装载 完成 后 执行 的 代码 ; 
} 
</script> 
< /head> 
<body onLoad= "函数 名 (参数 表 );"> 
网 页 的 内 容 
< /body> 


【 例 4-15】 本 例 中 的 hello() 函数 显示 一 个 对 话 框 , 当 网 页 装载 完成 后 就 调用 一 次 
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hello() 函 数 , 本 例文 件 4-15. html 在 浏览 器 中 的 显示 效果 如 图 4-17 所 示 。 





























加 
四 虽 ] DAwebvch44-15P - GCXx| 介 妆 蛮 
车 bxwebvch4v4-15html| x 
网 页 内 容 关 ] 











图 4-17 例 4-15 的 页 面 显示 效果 


代码 如 下 : 
<html> 
<head> 
< Script language= "JavaScript"> 
finction hello() { /定义 函数 


window.alert ("Hell0"); 
} 
< /script> 
< /head> 
<body onLoad= "hello();"> <!-- 使 用 onLoad 调 用 函数 --> 
网 页 内 容 
< /body> 
< /htm> 


4.5.3 全 局 变量 与 局 部 变量 


根据 变量 的 作用 范围 ,变量 又 可 分 为 全 局 变量 和 局 部 变量 。 全 局 变量 是 在 所 有 函数 
之 外 的 脚本 中 定义 的 变量 ,其 作用 范围 是 这 个 变量 定义 之 后 的 所 有 语句 ,包括 其 后 定义 的 
函数 中 的 程序 代码 和 它 后 面 的 其 他 一 script 二 .一 /script 二 标记 中 的 程序 代码 。 局 部 变 
量 是 定义 在 函数 代码 之 内 的 变量 ,只 有 在 该 函数 中 且 位 于 这 个 变量 定义 之 后 的 程序 代码 
可 以 使 用 这 个 变量 。 局 部 变量 对 其 后 的 其 他 函数 和 
脚本 代码 来 说 都 是 不 可 见 的 。 二 

如 果 在 函数 中 定义 了 与 全 局 变量 同名 的 局 部 变 ES 
量 , 则 在 该 函数 中 且 位 于 这 个 变量 定义 之 后 的 程序 代 | 1311 




















222222 


码 使 用 的 是 局 部 变量 ,而 不 是 全 局 变量 。 2 


333333 
【 例 4-16】 本 例 的 HTML 中 有 两 段 脚 本 ,每 个 222222 





脚本 定义 了 一 个 函数 ,在 函数 外 和 函数 内 分 别 定义 了 
同名 变量 myString ,本 例文 件 4-16. html 在 浏览 器 中 图 4-18 例 4-16 的 页 面 显示 效果 
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的 显示 效果 如 图 4-18 所 示 。 





代码 如 下 : 
<htm> 
<head> 
<title> 全 局 变量 与 局 部 变量 < /title> 
< /head> 
<body> 
< Script language= "JavaScript"> // 第 一 个 脚本 程序 块 
var myString= "111111"; // 定 义 全 局 变量 mystring 


document .write (myString+ "<br>"); // 输 出 全 局 变量 mystring 的 值 为 "11111" 
finction showl() { 


myString= "222222"; // 对 全 局 变量 mystring 赋 新 值 
} 
showl (); // 调 用 函数 showl() 
gocument -write (mystring+ "<br>"); /| 输出 全 局 变量 mystring 的 值 为 "222222" 
< /script> 
< script language= "JavaScript"> // 第 二 个 脚本 程序 块 


document .write tyStringt "<br>"); ”// 输 出 全 局 变量 mystring 的 值 为 "222222" 
function show2() { 
Var myString= "333333"; // 定 义 同名 局 部 变量 
document .write (myStringt "< br> "); 
} 
show2(); ”// 调 用 函数 show20) ,输出 局 部 变量 mystring 的 值 为 "333333" 
document .write tyStringt "<br> "); // 输 出 全 局 变量 mystring 的 值 为 "222222" 
< /script> 
< /body> 
< /htm> 


4.5.4 JavaScript 内 置 的 函数 


1. escape() 和 unescape() 


escape() 和 unescape() 函 数 的 功能 是 对 字符 串 进行 编码 和 解码。 在 许多 URL 地 址 
中 ,会 看 到 “% 十 数字 ”的 情况 ,这 是 由 于 采用 了 ISO-Latin-l 字符 集 进行 编码 。 可 以 采用 
unescape() 函 数 对 字符 串 进行 解码 ,也 可 以 用 escape() 函 数 对 字符 串 进 行 编码 。 

2. eval() 

eval( 字 符 串 ) 函数 将 字符 串 所 代表 的 运算 或 语句 作为 表达 式 来 执行 。 因 为 在 
JavaScript 中 编写 的 每 条 表达 式 语 句 都 是 事先 明确 固定 的 ,不 能 根据 运行 时 的 情况 进行 
变动 。 例 如 


Var oe 0; 
eval ("acat 1"); 


108 


第 4 章 vveseript 语言 基础 | 





执行 后 a 变量 的 值 是 1。 又 如 : 


Var str2= "document.write ("Hello!')"; 

Eval (str2); 
执行 后 会 在 浏览 器 窗口 中 显示 “Hello!”。 

对 于 “var al 二 1; 这 样 的 语句 ,在 程序 运行 时 不 能 改变 变量 的 名 称 。 使 用 eval 函数 
就 能 实现 这 样 的 功能 。 例 如 ,下 面 这 段 代码 定义 了 n 个 变量 ,变量 名 分 别 为 a0、al、 
a2.…… 相当 于 直接 在 程序 中 写 人 “var a0 二 0; var al 一 1;” 这 样 的 代码 。 





for(var i=0; i<n; i 计 +) { 
eval("var at i+t"="+i);} 


3. parseInt() 和 parseFloat() 


在 使 用 表单 时 , 常 将 文本 框 中 的 字符 串 按 照 需要 转换 为 整数 和 浮 点 数 , 这 样 的 操作 就 
要 用 到 parselInt() 函 数 和 parseFloat() 函 数 , 它 们 可 以 分 别 将 字符 串 转换 为 整 型 数 和 浮 点 
数 。 例 如 : 

Var int0= parseInt ("6.8"); 
则 int0 的 值 为 6。parseInt() 隐 数 不 是 对 字符 串 所 代表 的 数值 四 舍 五 人 ,而 是 进行 截 尾 操 
作 。 又 如 : 


Var float0= parseFloat ("6.8"); 
则 float0 的 值 为 6. 8。 

4. isNaN() 

NaN 意 为 not a number, 即 不 是 一 个 数值 。isNaN() 函 数 用 于 判断 表达 式 是 否 是 一 
个 数值 。 若 isNaNO 〇 返回 的 值 为 true, 则 表达 式 不 是 数值 ;反之 , 则 是 一 个 数值 。 例 如 : 


Var strO= "Hello!"; 
if (isNaN (str0)) { 

doaument.write (str0+ "不 是 一 个 数值 ") } 
else{ 

document .write (str0+ "是 一 个 数值 ") } 


以 上 代码 运行 的 结果 是 显示 “Hello! 不 是 一 个 数值 ”。 


46 基于 对 象 的 JavaScript 语言 


JavaScript 语言 采用 的 是 基于 对 象 的 (Object-Based) .事件 驱动 的 编程 机 制 , 因 此 , 必 
须 理解 对 象 以 及 对 象 的 属性 .事件 和 方法 等 概念 。 
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4.6.1 对 和 象 


1. 对 象 的 概念 


JavaScript 中 的 对 象 是 由 属性 (properties) 和 方法 (methods) 两 个 基本 的 元 素 构成 的 。 
用 来 描述 对 象 特性 的 一 组 数据 ,也 就 是 若干 个 变量 , 称 为 属性 ;用 来 操作 对 象 特 性 的 若干 
个 动作 ,也 就 是 若干 函数 , 称 为 方法 。 

简单 地 说 ,属性 用 于 描述 对 象 的 一 组 特征 ,方法 为 对 象 实施 一 些 动作 ,对 象 的 动作 常 
要 触发 事件 ,而 触发 事件 又 可 以 修改 属性 。 一 个 对 象 建立 以 后 ,其 操作 就 通过 与 该 对 象 有 
关 的 属性 .事件 和 方法 来 描述 。 

例如 ,document 对 象 的 bgColor 属性 用 于 描述 文档 的 背景 颜色 ,使 用 document 对 象 
的 write 方法 可 以 向 页 面 中 写 和 人 文本 内 容 。 

通过 访问 或 设置 对 象 的 属性 ,并且 调用 对 象 的 方法 ,就 可 以 对 对 象 进行 各 种 操作 ,从 
而 获得 需要 的 功能 。 

在 JavaScript 中 ,可 以 使 用 的 对 象 有 JavaScript 的 内 置 对 象 .由 浏览 器 根据 Web 页 面 
的 内 容 自动 提供 的 对 象 . 用 户 自 定义 的 对 象 。 

JavaScript 中 的 对 象 同时 又 是 一 种 模板 , 它 描述 一 类 事物 的 共同 属性 ,而 在 程序 编制 
过 程 中 ,所 使 用 的 是 对 象 的 实例 而 非 对 象 。 对 象 和 对 象 实例 的 这 种 关系 就 好 像 人 类 与 具 
体 某 个 人 的 关系 一 样 。 

JavaScript 中 的 对 象 名 、 属 性 名 与 变量 名 一 样 要 区 分 大 小 写 。 


2. 对 象 的 使 用 


要 使 用 一 个 对 象 , 有 以 下 3 种 方法 。 
(1) 引用 JavaScnPt 内 置 对 象 。 

(2) 由 浏览 器 环境 中 提供 。 

(3) 建新 对 象 。 

一 个 对 象 在 被 引用 之 前 必须 已 经 存在 。 


3. 对 象 的 操作 语句 


在 JavaScript 中 提供 了 几 个 用 于 操作 对 象 的 语句 .关键 字 及 运算 符 。 

1) for...in 语句 

for...in 语句 的 基本 格式 如 下 : 

for( 变 量 in 对 象 ){ 

代码 块 ; 

} 

该 语句 的 功能 是 用 于 对 某 个 对 象 的 所 有 属性 进行 循环 操作 , 它 将 一 个 对 象 的 所 有 属 
性 名 称 逐 一 赋值 给 一 个 变量 ,并 且 不 需要 事先 知道 对 象 属性 的 个 数 。 
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【 例 4-17】 列 出 window 对 象 的 所 有 属性 名 及 其 对 应 的 值 ,本 例文 件 4-17. html 在 
浏览 器 中 的 显示 效果 如 图 4-19 所 示 。 





The properties of ’window 

Window. poste ot nie ee ApplicationCache] 国 器 
Window. closed=false 

Window. defaultStatus= 

Window. devicePixelRatio=1 

Window. document=[object HTILDocument] 

Window. event=undefined 

Window. frameElement=null 

Window. history=[object History] 

Window. innerHeight=433 

Window. irnerWidth=633 

Window. local Storage=[object Storage] - 





图 4-19 例 4-17 的 页 面 显 示 效 果 


代码 如 下 : 


<html> 
<body> 
The properties of 'window' are: <br> 
< script language= "javascript" type= "text/javascript"> 
for (var i in window) { 
Window.document.write ('Window.'+ if+ '= "+winoGow[i]+ '<br> '); 
. 
< /script> 
< /body> 
< /htm> 


【说 明 】 从 显示 结果 可 以 看 到 ,通过 for...in 循环 ,window 对 象 的 所 有 属性 名 及 其 
对 应 的 值 都 被 显示 出 来 了 ,中 间 用 “= 二” 分开。 关于 window 对 象 以 及 其 他 一 些 对 象 的 具 
体内 容 后 面 将 作 介 绍 。 
2) with 语句 
with 语句 的 基本 格式 如 下 : 
Wth( 对 象 ){ 
代码 块 ， 
} 
该 语句 的 功能 用 于 声明 一 个 对 象 ,代码 块 中 的 语句 都 被 认为 是 对 这 一 对 象 属性 进行 
的 操作 。 这 样 , 当 需 要 对 一 个 对 象 进行 大 量 操作 时 ,就 可 通过 with 语句 来 替代 一 连 串 的 
“对 象 名 ”, 从 而 节省 代码 。 
例如 ,下 面 是 一 个 使 用 Date 对 象 显示 当前 时 间 的 程序 。 
< script language= "javascript"> 
Var current. time= new Date(); 
var str time= current time.getHours()+": "+ current time.getMinutes()+ 
: "+ current time.getseconds (); 
alert (str time); 
< /script> 
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可 以 使 用 with 语句 简写 : 


< script language= "javascript"> 
Var current time= new Date(); 
with (current time) { 
Var str time= getHours ()+": "+ getMinutes ()+ ": "+ getSeconds (); 
alert (str time); 
} 
< /script> 
3) this 关键 字 
this 用 于 将 对 象 指定 为 当前 对 象 。 
4) new 关键 字 
使 用 new 可 以 创建 指定 对 象 的 一 个 实例 ,其 创建 对 象 实例 的 格式 如 下 : 


对 象 实例 名 =new 对 象 名 (参数 表 ); 


5) delete 操作 符 
delete 操作 符 可 以 删除 一 个 对 象 的 实例 ,其 格式 如 下 : 


delete 对 象 名 ; 
4.6.2 ”对象 的 属性 


在 JavaScript 中 ,每 一 种 对 象 都 有 一 组 特定 的 属性 。 有 许多 属性 可 能 是 大 多 数 对 象 
所 共有 的 ,如 Name 属性 定义 对 象 的 内 部 名 称 ;还 有 一 些 属性 只 局 限于 个 别 对 象 。 

对 象 属性 的 引用 有 以 下 3 种 方式 。 

1. 点 (. ) 运 算 符 


把 点 放 在 对 象 实例 名 和 它 对 应 的 属性 之 间 , 以 此 指向 一 个 唯一 的 属性 。 属 性 的 使 用 
格式 如 下 : 


对 象 名 .属性 名 = 属性 值 ; 


例如 ,一 个 名 为 person 的 对 象 实例 , 它 包 含 sex、name、age 3 个 属性 ,对 它们 的 赋值 
可 用 如 下 代码 。 

person.sex— "female"; 

person.name= "Jane"; 

person.age= 18; 


2. 对 象 的 数组 下 标 


通过 “对 象 [ 下 标 ]” 的 格式 也 可 以 实现 对 象 的 访问 。 在 用 对 象 的 下 标 访问 对 象 属性 
时 ,下 标 是 从 0 开始 ,而 不 是 从 1 开始 的 。 例 如 ,前面 代 码 可 改写 为 : 
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Person[0]= "female"; 

person[1]= "Jane"™; 

person[2]=18; 

通过 下 标 形式 访问 属性 ,可 以 使 用 循环 操作 获取 其 值 。 对 上 面 的 例子 可 用 以 下 方式 
获取 每 个 属性 的 值 。 

function show_numiber (person) 

{for(var i=0; i<3; i++) 

Gocument .write (person[i]) 
} 
车 采用 for...in 语句 , 则 不 知 其 属性 的 个 数 也 可 以 实现 : 


function show_numiber (person) 
{for (var prop in this) 

document.write (this [prop]) 
} 


3. 通过 字符 串 的 形式 实现 
通过 “对 象 [字符 串 ]” 的 格式 实现 对 象 的 访问 。 
person["sex"]= "female"; 


person["name"]= "Jane"; 
person["age"]= 18; 


4.6.3 ”对 象 的 事件 


事件 就 是 对 象 上 所 发 生 的 事情 。 事 件 是 预先 定义 好 的 .能够 被 对 象 识别 的 动作 ,如 单 
击 (Click) 事 件 、 双 击 (DblClick) 事 件 、 装 载 (Load) 事 件 、 鼠 标 移 动 (MouseMove) 事 件 等 ， 
不 同 的 对 象 能 够 识别 不 同 的 事件 。 通 过 事件 ,可 以 调用 对 象 的 方法 ,以 产生 不 同 的 执行 
动作 。 

有 关 JavaScript 的 事件 ,后 面 章节 将 详细 介绍 。 


4.6.4 ”对 象 的 方法 


一 般 来 说 ,方法 就 是 要 执行 的 动作 。JavaScript 的 方法 是 函数 。 如 window 对 象 的 关 
闭 (close) 方 法 ,打开 (open) 方 法 等 。 每 个 方法 可 完成 某 个 功能 ,但 其 实现 步骤 和 细节 用 
户 既 看 不 到 ,也 不 能 修改 ,用 户 能 做 的 工作 就 是 按照 约定 直接 调用 它们 。 

方法 只 能 在 代码 中 使 用 ,其 用 法 依赖 于 方法 所 需 的 参数 个 数 以 及 它 是 否 具 有 返回 值 。 

在 JavaScript 中 ,对 象 方法 的 引用 非常 简单 。 只 需 在 对 象 名 和 方法 之 间 用 点 分 隔 就 
可 指明 该 对 象 的 某 一 种 方法 ,并 加 以 引用 。 其 格式 如 下 : 


对 象 名 .方法 0 
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例如 ,引用 person 对 象 中 已 存在 的 一 个 方法 howold() , 则 可 使 用 : 
Gopcument.write (person.howold ()); 
如 果 引 用 math 内 部 对 象 中 sin() 的 方法 , 则 : 


with(math) { 
Gocument .write (sin (30)); 
ooment .write (sin(75)); 
} 


若 不 使 用 with, 则 引用 时 相对 要 复杂 些 。 


Gopcument.write math.sin(30))7 
Gocument .write (math.sin (75)); 


47 JavaScript 的 内 置 对 象 


作为 一 种 基于 对 象 编程 的 语言 ,JavaScript 在 编程 时 经 常 需要 使 用 到 各 种 对 象 。 下 
面 介绍 一 些 JavaScript 编程 中 经 常用 到 的 内 置 对 象 的 特点 和 使 用 方法 ,包括 数组 对 象 . 字 
符 串 对 象 日 期 对 象 . 时 间 对 象 和 数学 对 象 等 。 

JavaScript 中 提供 的 内 部 对 象 按 使 用 方法 可 分 为 两 种 情况 : 一 种 是 动态 对 象 , 在 引用 
它 的 属性 和 方法 时 ,必须 使 用 new 关键 字 创 建 一 个 对 象 实例 ,然后 使 用 “对 象 实例 名 . 成 
员 ” 的 格式 来 访问 其 属性 和 方法 。 男 一 种 是 静态 对 象 ,在 引用 该 对 象 的 属性 和 方法 时 不 需 
要 使 用 new 关键 字 创 建 对 象 实例 ,直接 使 用 “对 象 名 . 成 员 ” 的 格式 来 访问 其 属性 和 方法 。 


4.7.1 数组 对 象 


在 JavaScript 中 ,数组 (Array) 的 组 织 方式 是 以 对 象 的 形式 出 现 的 。 
1. 数组 对 象 的 定义 方法 
数组 对 象 的 定义 有 3 种 方法 。 


var 数组 对 象 名 =new Array(); 

Var 数组 对 象 名 =new Array( 数 组 元 素 个 数 ); 

var 数组 对 象 名 =new Rrray 人 第 1 个 数组 元 素 的 值 , 第 2 个 数组 元 素 的 值 ,..); 

第 1 种 方法 在 定义 数组 时 不 指定 元 素 个 数 , 当 具 体 为 其 指定 数组 元 素 时 ,数组 元 素 的 
个 数 会 自动 适应 。 例 如 ,定义 数组 : 

order= new Array (); 1/ 定义 有 0 个 数组 元 素 的 数组 

order[12]= "abc123"; // 用 [1 引用 数组 下 标 

JavaScript 自动 把 数组 扩充 为 13 个 元 素 , 前 12 个 元 素 (order[0]~~order[11]) 的 值 
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被 初始 化 为 null ,第 13 个 元 素 order[12] 为 "abc123"。 

JavaScript 数组 元 素 的 访问 也 是 通过 数组 下 标 来 实现 的 ,数组 元 素 的 下 标 是 从 0 开 
始 的 。 
第 2 种 方法 是 指定 数组 元 素 的 个 数 , 此 时 将 创建 指定 个 数 的 数组 元 素 。 同 样 , 当 具体 
指定 数组 元 素 时 ,数组 的 元 素 个 数 也 可 以 动态 更 改 。 例 如 ,定义 数组 : 

var person=new Array(10); /定义 有 10 个 数组 元 素 的 数组 

Person[20]= "Jhon"; // 为 数组 元 素 赋值 ,数组 自动 扩充 为 1 个 元 素 

第 3 种 方法 是 在 定义 数组 对 象 的 同时 ,对 每 一 个 数组 元 素 赋 值 , 同 时 数组 元 素 按照 顺 
序 赋 值 ,各 数组 元 素 之 间 用 逗号 分 隔 , 并 且 不 允许 省 略 其 中 的 数组 元 素 。 例 如 ,新 建 一 个 
名 为 person 的 数组 ,其 中 包含 ZhangSan、LiSi、WangWu 3 个 元 素 。 


Var person= new Array ("ZhangSan", "LiSi", "Wangwa")7 

数组 中 的 元 素 类 型 可 以 是 数值 型 .字符 型 或 其 他 对 象 , 并 且 同 一 个 数组 中 的 元 素 类 型 
也 可 以 不 同 , 甚 至 一 个 数组 元 素 也 可 以 是 一 个 数组 。 例 如 : 

Var Person= new Array ("ZhangSan", 169, new array ("BeiJing", 2008); 

上 面 例子 中 ,数组 person 中 的 3 个 元 素 及 对 应 的 值 分 别 为 : person[0] = 
"ZhangSan" ,person[1]=169,person[2,0]="BeiJing" ,person[2,1]=2008。 

对 于 用 数组 作为 数组 元 素 的 情况 ,可 用 多 维 数组 的 方式 访问 ,如 上 例 person[2,1]= 
2008 也 可 写 为 person[2][1] 二 2008。 

除 使 用 以 上 3 种 方法 定义 数组 对 象 外 ,还 可 以 直接 用 [ ] 定 义 数组 并 赋值 。 例 如 : 

Var order= [1,2,3,4,5,6]; 

其 效果 与 用 var order 王 new Array(1,2,3,4,5,6) 相 同 。 


【 例 4-18】 定义 一 个 具有 3 个 元 素 的 一 维 数据 并 分 ee 
别 赋值 ,然后 显示 出 来 。 本 例文 件 4-18. html 在 浏览 器 。 || 仿 pxwebvcneetehm x 























中 的 显示 效果 如 图 4-20 所 示 。 Hel 
代码 如 下 : 2 
<htm> a 
a 图 4-20 例 4-18 的 页 面 显示 效果 
< script> 


Var myArray=new Array(3); ”// 定 义 有 3 个 元 素 的 数组 对 象 
myArray[0]= "Ttem 0"7 
myArray[1]= "Item 1"; 
myArray[2]= "Item 2"7 
for (i=0; i<myArray.length; i++) 
{ 
document .write (myArray [i]+ "<br> "); 
} 
< /script> 
< /body> 
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< /html> 


【 例 4-19】 定义 一 个 二 维 数组 ,并 把 数组 元 素 显示 到 表格 中 。 本 例文 件 4-19. html 
在 浏览 器 中 的 显示 效果 如 图 4-21 所 示 。 






































代码 如 下 : GE 司 ON 
<html> 司 ia 针 
< head> 具名 | 性 别 
<title> 数 组 对 象 < /title> 甘 芳 
< /head> 医 勇 | 



































A 了 
< Script language= "JavaScript" 
type= "text/javascript"> 
Neier 图 4-21 例 4-19 的 页 面 显示 效果 
order[0]=new Array(" 王 芳 "," 女 "18); 
order[1]=new Array(" 李 和 勇 "," 男 "17); 
order[2]=new Array(" 张 丽 "," 女 "19); 
document .write ('< table border alignr= "center"> '); 
document .write('<th> 姓 名 < /th>< th> 性 别 < /th><th> 年 龄 < /th> '); 
for (i= 0; i< order.length; i++) //length 属 性 表示 数组 元 素 的 个 数 ,order.length 为 3 
{ document .write('< tr> '); 
for(j=0; j< order[0] .length; j++) //order[0].length 为 3 
{ document.write('<td> '+ order[i] [j]+ '< /to> '); } 
dpcument.write('< /tr> '); 
# 
ocument .write ('< /table> '); 
< /script> 
< /pody> 
</htm> 


2. 数组 对 象 的 属性 


数组 对 象 的 属性 主要 是 length, 它 用 于 获得 数组 中 元 素 的 个 数 , 即 数组 中 最 大 下 标 
加 1。 


3. 数组 对 象 的 方法 


sort(function) : 在 不 指定 参数 时 ,用 于 对 数组 中 的 字符 串 元 素 按 字母 (对 应 的 ASCII 
码 ) 顺 序 进 行 排序 。 若 有 元 素 不 是 字符 串 类 型 , 则 先 转换 为 字符 串 类 型 ,再 排序 。 指 定 参 
数 时 ,所 指定 的 参数 是 一 个 排序 函数 。 

reverse() : 颠倒 数组 中 元 素 的 顺序 。 

concat(arrayi，...，array, ): 用 于 将 个 数组 合并 到 arrayi 数组 中 。 

join(string) : 将 数组 中 的 所 有 元 素 合并 为 一 个 字符 串 ,其间 用 string 参数 分 隔 。 省 
略 参数 时 ,直接 合并 ,不 加 分 隔 。 

slice(start,stop): 返回 数组 从 start 起 .stop 止 的 部 分 。start 和 stop 为 负数 时 ,分别 
表示 倒数 第 start 或 倒数 第 stop 个 元 素 。 
116 











第 4 章 vveseript 语言 基础 | 





tostring() : 返回 一 个 字符 串 , 其 中 包含 数组 中 的 所 有 元 素 , 每 个 元 素 用 逗号 分 隔 


【 例 4-20】 分 别 定义 两 个 一 维 数组 ,分 别 把 数组 中 的 元 素 按 原始 顺序 和 排序 输出 ， 


本 例文 件 4-20. html 在 浏览 器 中 的 显示 效果 如 图 4-22 


所 示 。 已 DAweb\ch4\4-20+ 只 ~ 
代码 如 下 : 全 殉 8 徘 序 3 


<body> 
< script language= "JavaScript"> 
Var myArrayl= new Array (5) 
myArrayl [0]= "z"; 
myArrayl [1]= "c"; 
myArrayl1 [2]= "d"; 
myArrayl [3]= "a"; 
myArrayl [4]= "q"; 




















, C3 da 
, ci d, q， 
, 3, 1, 9, 
, 1, 3, 6, 
Gl 

















document .write (myArrayl+ "< br> "); // 原 始 顺序 
dbcument .write (myArrayl .sort ()+ "<br> "); // 升 序 排列 
Var myArray2= new Array (5); 


myArray2[0]= 67 
myArray2[1]= 3; 
myArray2[2]=1; 
myArray2[3]= 97 


myArray2 [4]= 0; 
cocument .write (myArray2+ "< br> "); // 原 始 顺序 
document .write (myRrray2.sort ()+ "<br> "); // 升 序 排列 
document .write (yarray2.reverse ()+ "<br> "); // 降 序 排列 
< /script> 
< /body> 


4.7.2 字符 串 对 象 
1. 字符 串 (String) 对 象 的 定义 方法 


图 4-22 例 4-20 的 页 面 显示 效果 


String 对 象 是 动态 对 象 , 需 要 创建 对 象 实例 后 才能 引用 它 的 属性 或 方法 。 有 两 种 方 


法 可 创建 一 个 字符 串 对 象 。 其 格式 如 下 : 


字符 串 变量 名 =" 哼 符 串 史 
字符 串 变量 名 =new String 字符 串 9; 


2. 字符 串 对 象 的 属性 
字符 串 对 象 的 最 常用 属性 是 length ,功能 是 得 到 字符 串 的 字符 个 数 。 例 如 : 


Var myUrl= "http: /www-amebook-com"7 
var myUrlIer=myUrl.length; ”// 或 var myUrlIenr "http: //www.abook.om".length; 


3. 字符 串 对 象 的 方法 


String 对 象 的 方法 主要 用 于 字符 串 在 Web 页 面 中 的 显示 .字体 大 小 .字体 颜色 .字符 
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的 搜索 以 及 字符 的 大 小 写 转换 。 
anchor( 字 符 串 ) : 为 字符 串 对 象 中 的 内 容 两 端 加 上 HTML 的 定位 锚 点 标记 ,如 同 
二 a name 一 "字符 串 "> 文本 </a 之 。 例 如 : 


var strare= "机 械 工业 出 版 社 网 站 "; 
stramp= stramp.anchor( 员 工 "); 


得 到 的 strcmp 值 为 : 
<anare= "机 工 吃 机 械 工 业 出 版 社 网 站 < /a> 
link(): 用 于 创建 一 个 超 链接 。 例 如 : 


<html> 
<body> 
<script> 
var ampbocoklink= "机 械 工 业 出 版 社 网 站 " 
Gbcument.write(" 单 击 进 入 只 amgbooklink.link(htbp: //wwww.arpbock.omV/")); 
Gocument.close (); 
< /script> 
< /pody> 
< /html> 


big() : 用 大 字体 显示 字符 。 例 如 : 
Var mystr= "abcl123"; mystr=mystr.big(); 


small() : 用 小 字体 显示 字符 。 
italics(): 用 斜体 字 显 示 字 符 。 
bold(): 用 粗 体 字 显示 字符 。 
blink() : 使 字符 闪烁 显示 。 
fixed(): 固定 高 亮 字 显 示 。 
fontsize(size) : 控制 字体 大 小 。 
fontcolor(color) : 控制 字体 颜色 。 
toUpperCase() 和 toLowerCase() : 把 指定 字符 串 转换 为 大 写 或 小 写 。 
indexOf[character,fromIndexj]: 返回 从 第 fromIndex 个 字符 起 查找 字符 character 
第 一 次 出 现 的 位 置 。 
chartAt(Cposition) : 返回 指定 字符 串 的 第 position 个 字符 。 
substring(start,end): 返回 指定 字符 串 start 到 end 的 所 有 字符 。 
sub(): 将 指定 字符 串 用 下 标 格式 显示 。 
toString(): 把 对 象 中 的 数据 转换 成 字符 串 。 例 如 : 
temp= counter * 10; 
myStr= tenp.toString (); 
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4.7.3 日 期 对 象 


日 期 (Date) 对 象 用 于 表示 日 期 和 时 间 。 通 过 日 期 对 象 可 以 进行 一 系列 与 日 期 ,时间 
有 关 的 操作 和 控制 。JavaScript 并 没有 提供 真正 的 日 期 类 型 , 它 是 从 1970 年 1 月 1 日 
0:0:0 开 始 以 ms( 毫 秒 ) 来 计算 当前 时 间 的 。 表 示 日 期 的 数据 都 是 数值 型 的 ,可 进行 数学 
运算 。 

1. 日 期 对 象 的 定义 方法 


日 期 对 象 的 定义 方法 有 4 种 。 
(1) 创建 日 期 对 象 实例 ,并 赋值 为 当前 时 间 ,其 格式 如 下 : 


var 日 期 对 象 名 =new Date(); 


(2) 创建 日 期 对 象 实例 ,并 以 GMT( 格 林 尼 治平 均 时 间 , 即 1970 年 1 月 1 日 0 时 
0 分 0 秒 0 毫秒 ) 的 延迟 时 间 来 设 定 对 象 的 值 ,其 单位 是 ms。 其 格式 如 下 : 


Var 日 期 对 象 名 =new Date (milliseconds); 


(3) 使 用 特定 的 表示 日 期 和 时 间 的 字符 串 string ,为 创建 的 对 象 实例 赋值 。string 的 
格式 与 日 期 对 象 的 parse 方 法相 匹配 。 其 格式 如 下 : 


var 日 期 对 象 名 =new Date (string); 
(4) 按照 年 月 .日 时、 分 . 秒 . 毫 秒 的 顺序 ,为 创建 的 对 象 实例 赋值 。 其 格式 如 下 ， 
var 日 期 对 象 名 =new Date (year,month,day,hours,mintues,seconds,milliseconds); 


Date 中 的 月 份 . 日 期 .小 时 、 分 钟 、 秒 .毫秒 数 都 是 从 0 开始 ,而 年 是 从 1970 年 开始 。 
这 一 方法 是 从 UNIX 沿袭 下 来 的 ,1970 年 1 月 1 日 0 时 又 被 认为 是 UNIX 的 “创世纪 ”。 


2. 日 期 对 象 的 方法 


Date 对 象 没 有 提供 直接 访问 的 属性 。 只 具有 获得 日 期 时间, 设置 日 期 .时 间 ,格式 
转换 的 方法 。 
1) 获取 日 期 ,时间 的 方法 
获得 日 期 .时 间 的 方法 如 下 。 
getFullYear() : 得 到 当前 年 份 数 。 
getMonth() : 得 到 当前 月 份 数 ,0 代表 1 月 ,1 代表 2 月 .11 代表 12 月 。 
getDate() : 得 到 当前 日 期 数 。 
getDay() : 得 到 当前 星期 数 。 
getHours() : 得 到 当前 小 时 数 。 
getMinutes(): 得 到 当前 分 钟 数 。 
getSeconds() : 得 到 当前 秒 数 。 
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getTimeZoneOffset() : 得 到 时 区 的 偏 移 信 息 。 
2) 设置 日 期 和 时 间 的 方法 
设置 日 期 ,时间 的 方法 如 下 。 
setFullYear() : 设置 年 份 。 
setMonth(): 设置 月 份 。 
setDate() : 设置 日 期 。 
setHours(): 设置 小 时 。 
setMinutes() : 设置 分 钟 。 
setSeconds(): 设置 秒 数 。 
3) 格式 转换 的 方法 
格式 转换 的 方法 如 下 。 
toGMTString(): 转换 成 以 格林 尼 治 标准 时 间 表 达 的 字符 串 。 
toLocaleString() : 转换 成 以 当地 时 间 表 达 的 字符 串 。 
toString(): 把 时 间 信 息 转 换 为 字符 串 。 
parse: 从 表示 时 间 的 字符 串 中 读 出 时 间 。 
UTC: 返回 从 格林 尼 治 标准 时 间 到 指定 时 间 的 差 
距 ( 单 位 为 ms) 。 全 SEE 
【 例 4-21】 制作 一 个 节日 倒计时 的 程序 ,本 例文 优 D\web\ch4\4-2Lhtml x 
件 4-21. html 在 浏览 器 中 的 显示 效果 如 图 4-23 所 示 。 现在 时 间 是 ， 























14:45 
今天 日 期 是 ，2017-9-26 








代码 如 下 : 现在 高 国庆 节 还 有 : 4 天 
< head> I 
< script language= "JavaScript"> - - 
Var timedate= new Date (2017,9,1); 图 4-23 例 4-21 的 页 面 显示 效果 


//2017 年 10 月 1 日 ,注意 0 代表 1 月 ,9 代表 10 月 

var times= "国庆 节 "; 

Var now= new Date ()7 

Var date= timedate.getTime () - now.getTime ()7 

var time=Math.floor (Gate / (1000 * 60 * 60 * 24)); 

if (time>=0) 
docoument .write ("现在 时 间 是 : ",now.getHours(),": ",now.getMinutes ()); 
document .write("<br> 今 天 日 期 是 : ",now.getFullYear(),"- ",now. 

PtMonth ()+ 1,"— ",now.getDate ()); 
document.write("<br> 现 在 离 人 timesr "还 有 : "+timet "天 "); 
< /script> 
< /head> 


4.7.4 数学 对 象 


在 数学 (Math) 对 象 中 ,既定 义 一 些 常用 的 计算 方法 ,又 包含 一 些 数学 常量 。 数 学 对 
象 是 静态 对 象 ,不 能 用 new 关键 字 创建 对 象 的 实例 ,数学 对 象 的 调用 方式 如 下 
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Math. 数 学 函数 名 (参数 表 ) 


通常 把 数学 对 象 中 的 数学 常数 作为 数学 对 象 的 属性 ,把 数学 对 象 中 的 函数 作为 数学 
对 象 的 方法 。 


1. 数学 对 象 的 属性 


与 其 他 对 象 属性 不 同 的 是 ,数学 对 象 中 的 属性 是 只 读 的 ,可 以 使 用 的 常数 如 下 。 
E: 代表 数学 常数 e( 一 2.7182) 。 

LN10: 10 的 自然 对 数 ( 一 2. 30259) 。 

LN2: 2 的 自然 对 数 (一 0.69315) 。 

PI: 圆周 率 ( 王 3. 1415926) 。 

SQRT1_2: 1/2( 即 0.5) 的 平方 根 ( 王 0.7071) 。 

SQRT2: 2 的 平方 根 ( 一 1.4142) 。 

LOG2E: 以 2 为 底 e( 自 然 对 数 的 底 ) 的 对 数 ( 王 1. 44269 ) 。 

LOG10E: 以 10 为 底 e( 自 然 对 数 的 底 ) 的 对 数 ( 为 0.4349 ) 。 

数学 对 象 的 常量 和 函数 与 其 他 对 象 一 样 ,是 区 分 大 小 写 的 。 


2. 数学 对 象 的 方法 


数学 对 象 的 主要 函数 包括 如 下 。 

sin(a); 求 a 的 正 弱 值 。 

cos(a): 求 a 的 余弦 值 。 

tan(a): 求 a 的 正切 值 。 

asin(a) : 求 a 的 反正 弦 值 。 

acos(a): 求 a 的 反 余弦 值 。 

atan(a) : 求 a 的 反正 切 值 。 

exp(a): 求 a 的 指数 。 

log(a): 求 a 的 自然 对 数 。 

pow(base,exponent): 求 base 为 底 .exponent 为 指数 的 乘 方 值 。 
round(a) : 对 a 进行 四 舍 五 人 运算 。 

floor(a) : 得 到 不 大 于 a 的 最 大 整数 。 

sqrt(a) : 求 a 的 平方 根 。 

abs(a): 求 a 的 绝对 值 。 

random(): 取 随 机 数 , 返 回 0 一 1 的 伪 随 机 数 。 

max(a,b): 取 a 和 b 中 的 较 大 者 。 

min(a,b): 取 a 和 b 中 的 较 小 者 。 

数学 对 象 中 ,函数 的 参数 均 为 浮 点 型 , 且 三 角 函 数 中 的 参数 为 弧度 值 。 
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48 自 定义 对 象 


在 JavaScript 中 可 以 使 用 内 置 对 象 ,也 可 以 创建 用 户 自 定义 对 象 ,但 必须 为 该 对 象 创 
建 一 个 实例 。 这 个 实例 就 是 一 个 新 对 象 , 它 具有 对 象 定义 中 的 基本 特征 。 这 里 介绍 两 种 
自 定义 对 象 的 方法 。 


1， 初始 化 对 象 


初始 化 对 象 是 一 种 通过 初始 化 对 象 的 值 ,建立 自 定义 对 象 的 方法 。 初 始 化 对 象 的 一 
般 格式 如 下 : 


对 象 ={ 属性 1: 属性 值 1; 属 性 2: 属性 值 2;..* 属 性 n: 属性 值 n}; 
2. 定义 对 象 的 构造 函数 
定义 对 象 的 构造 函数 的 一 般 格式 如 下 : 


function 对 象 名 (属性 1 属性 2, ..* 属 性 中 
{ 

this. 属 性 ]= 属 性 值 1; 

this, 属 性 2 属性 值 2; 


this. 属 性 六 属性 值 my 
this. 方 法 = 函数 名 17 
this. 方 法 和 = 函数 名 2; 


this: 方 法 丘 函 数 名 w 
} 
可 以 看 出 ,构造 函数 的 名 称 就 是 自 定义 对 象 的 名 称 ; 函 数 接收 参数 用 于 初始 化 对 象 本 
身 的 属性 。 构 造 函 数 没有 返回 值 。 
在 定义 对 象 的 过 程 中 ,还 定义 了 该 对 象 的 方法 。 在 定义 对 象 的 方法 时 ,方法 名 和 所 引 
用 的 函数 名 是 两 个 概念 ,它们 既 可 同名 ,也 可 以 不 同名 。 被 引用 的 函数 必须 是 在 定义 这 个 
对 象 前 定义 好 的 ,否则 在 执行 时 就 会 出 错 。 
在 定义 好 对 象 及 其 对 应 的 方法 后 ,就 可 创建 这 个 对 象 的 实例 。 与 其 他 对 象 创建 对 象 
实例 一 样 , 自 定义 对 象 创建 对 象 实例 同样 是 用 new 语句 。 
下 面 用 构造 函数 法 自 定义 对 象 ,并 为 对 象 实例 增加 属性 和 方法 。 
< script language= "JavaScript"> 
fimction Person (name,age) 
{ 
this-name= name; // 属 性 
this.age= age; // 属 性 
this.say= sayFunc; /方法 ,sayEunc 为 函数 名 
} 
function sayFunc() 
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{ 
alert (this.namet ","+ this.age); 
} 
Var personl= new Person ("Tom",17); 
Personl.say(); 
Var person2— new Person ("Jhon", 20); 
Person2.say ()7 
< /script> 
在 创建 personl 对 象 实例 时 ,构造 函数 中 的 this 代表 personl 对 象 实例 。this. age 一 
age 和 this. name 一 name 语句 为 personl 对 象 实例 增加 两 个 属性 ;this. say 王 sayFunc 语 
句 为 personl 对 象 增 加 一 个 方法 。 在 创建 person2 对 象 实例 时 也 相同 。 
当 执 行 “personl. say(); ?语句 时 ,所 调用 的 sayFunc() 中 的 this 代表 personl 这 个 对 
象 实例 ; 当 执 行 “person2. say();” 时 ,所 调用 的 sayFunc() 中 的 this 就 代表 person2 这 个 
对 象 实例 。 


习 ”是 
1. 已 知 圆 的 半径 是 10, 计 算 圆 的 周 长 和 面积 ,如 图 4-24 所 示 。 


Se 
乱 计算 国 的 周 长 和 面积 
图 的 半径 为 10 


圆 的 周 长 为 62. 83 
圆 的 面积 为 314. 16 

















图 4-24 题 1 图 


2. 使 用 多 重 循环 在 网 页 中 输出 乘法 口诀 表 , 如 图 4-25 所 示 。 


知 DAweb\ch4\ 习 里 vt4-2.html 
民 绽 击 条 法 口 沁 表 x 


1x1=1| 
1x2=2||2x2=4 
1x3=3||2x3=6 ||3x3=9 
1x4=4||2x4=8 ||3x4=12||4x4=16| 
1x5=5||2x5=10||3x5=15||4x5=20||5x5=25| 
1x6=6||2x6=12||3x6=18||4x6=24|5x6=30||6x6=36| 
1x7=7||2x7=14||3x7=21||4x7=28| [Bx7=35 I6x7=42||7x7=49 
1x8=8||2x8=16||3x8=24||4x8=32||5x8=40||6x8=48||7x8=56||8x8=64| 
1x9=9||2x9=18||3x9=27||4x9=36| [5x9=45 I6x9=54||7x9=63||8x9=72||9x9=81 
























































































































































号 100% ~ 


图 4-25 题 2 图 
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3. 在 页 面 中 用 中 文 显示 当天 的 日 期 和 星期 ,如 图 4-26 所 示 。 
4. 在 网 页 中 显示 一 个 工作 中 的 数字 时 钟 ,如 图 4-27 所 示 。 


[ee ET TE cx 出 


Suomen -| 








寺 100% ~ 


图 4-26 题 3 图 图 4-27 题 4 图 


5. 创建 自 定义 函数 在 网 页 中 输出 自 定义 行列 的 表格 ,如 图 4-28 所 示 。 
6. 应 用 构造 函数 创建 图 书 对 象 及 实例 ,输出 对 象 的 所 有 属性 和 值 ,如 图 4-29 所 示 。 








种: 行 第 ! 列 第 1 行 第 2 列 ED EE 
居于 下 区 第 2 列 2 行 第 列 2 行 第 二 
驯 3 行 第 ! 列 第 3 行 第 2 列 EE ED 


























值 ，3 
属性 名 ，publishing， 局 人， 清华 大 学 出 版 社 


胞 100% > 








图 4-29 题 6 图 
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网 页 最 终 都 要 通过 与 用 户 的 交互 操作 ,在 浏览 器 中 显示 出 来 。JavaScript 将 浏览 
本 身 、 网 页 文档 以 及 网 页 文档 中 的 HTML 克 亲 等 六 都 用 相应 的 内 置 对 象 来 表示 ,其 中 一 些 
对 象 是 作为 另外 一 些 对 象 的 属性 而 存在 的 ,这 些 对 象 及 对 象 之 间 的 层次 关系 统称 为 文档 
对 象 模型 (Document Object Model,DOM) 。 在 脚本 程序 中 访问 DOM 对 象 ,就 可 以 实现 
对 浏览 器 本 身 、 网 页 文档 以 及 网 页 文档 中 的 HTML 元 素 的 操作 ,从 而 控制 浏览 器 和 网 页 
元 素 的 行为 和 外 观 。 


51 DOM 模 型 


DOM 是 一 种 与 平台 .语言 无 关 的 接口 ,允许 程序 和 脚本 动态 地 访问 或 更 新 HTML 
或 XML 文档 的 内 容 、 结 构 和 样式 , 且 提供 了 一 系列 的 函数 和 对 象 来 实现 访问 .添加 、 修 改 
及 删除 操作 。HTML 文档 中 的 DOM 模型 如 图 5-1 所 示 。 
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图 5-1 HTML 文档 中 的 DOM 模型 


DOM 对 象 的 一 个 特点 是 , 它 的 各 种 对 象 有 明确 的 从 属 关 系 。 也 就 是 说 ,一 个 对 象 可 
能 是 从 属于 另 一 个 对 象 的 ,而 它 又 可 能 包含 其 他 的 对 象 。 
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在 从 属 关系 中 ,window 对 象 的 从 属地 位 最 高 , 它 反映 的 是 一 个 完整 的 浏览 器 窗口 。 
window 对 象 的 下 级 还 包含 frame .document location history 对 象 ,这 些 对 象 都 是 作为 
window 对 象 的 属性 而 存在 的 。 网 页 文件 中 的 各 种 元 素 对 象 又 是 document 对 象 的 直接 
或 间接 属性 。 

在 JavaScript 中 ,window 对 象 为 默认 的 最 高 级 对 象 ,其 他 对 象 都 直接 或 间接 地 从 属 
于 window 对 象 ,因此 在 引用 其 他 对 象 时 ,不必 再 写 " window. ”。 

DOM 除了 定义 各 种 对 象 外 ,还 定义 了 各 个 对 象 所 支持 的 事件 ,以 及 各 个 事件 所 对 应 
的 用 户 的 具体 操作 。 

CSS 脚本 编程 语言 和 DOM 的 结合 使 用 ,能 够 使 HTML 文档 与 用 户 具 有 交互 性 和 
动态 变换 性 ,这 3 种 技术 的 结合 称 为 动态 HTML(Dynamic HTML,DHTML)。 下 面 介 
绍 几 个 重要 的 浏览 器 对 象 ,以 及 如 何 运 用 JavaScript 编程 实现 用 户 与 Web 页 面 交 互 。 


52 Wndw 对 象 


窗口 (window) 对 象 处 于 整个 从 属 关系 的 最 高 级 , 它 提供 了 处 理 窗口 的 方法 和 属性 。 
每 一 个 window 对 象 代 表 一 个 浏览 器 窗口 。 


5.2.1 window 对 象 的 属性 


window 对 象 的 属性 如 表 5-1 所 示 。 
表 5-1 window 对 象 的 属性 
































属 性 描 述 
closed 只 读 , 返 回 窗 口 是 否 已 被 关闭 
opener 可 返回 对 创建 该 窗口 的 window 对 象 的 引用 
defaultstatus 可 返回 或 设置 窗口 状态 栏 中 的 默认 内 容 
Status 可 返回 或 设置 窗口 状态 栏 中 显示 的 内 容 
innerWidth 只 读 ,窗口 的 文档 显示 区 的 宽度 (单位 像素 ) 
innerHeight 只 读 .窗口 的 文档 显示 区 的 高 度 (单位 像素 ) 
parent 如 果 当 前 窗口 有 父 窗口 ,表示 当前 窗口 的 父 窗口 对 象 
self 只 读 , 对 窗口 自身 的 引用 
top 当前 窗口 的 最 顶层 窗口 对 象 
name 当前 窗口 的 名 称 





1. closed 属性 
closed 属性 用 于 判断 一 个 窗口 是 否 被 关闭 。 
下 面 一 行 代码 可 关闭 当前 窗口 。 
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<a href= "/" onclick= "javascript: window.close() ;retum false;"™ > 关闭 窗口 < /a> 
下 面 代 码 将 在 2 秒 后 关闭 当前 页 。 
< script language= "JavaScript"> 
setTimeout ("window.close () ;", 2000); 
< /script> 
2. opener 属性 
opener 属性 用 于 存放 open() 方 法 打开 窗口 的 父 窗口 。 
3. defaultstatus 属性 
defaultstatus 属性 用 于 设置 浏览 器 状态 栏 默认 的 显示 信息 。 
4. status 属性 


status 属性 用 于 设置 浏览 器 状态 栏 当前 显示 的 信息 。 

【 例 5-1】 设置 浏览 器 状态 栏 默认 显示 的 信息 , 当 用 户 单 击 “ 改 变 状 态 栏 提 示 ” 按 钮 
后 ,状态 栏 将 显示 新 的 提示 ,本 例文 件 5-1. html 在 浏览 器 中 显示 的 效果 如 图 5-2 和 图 5-3 
所 示 。 


|] Dweb\ch5\5-Lht PD- OX § 全 DAweb\ch5\5-Lht PD- OX 
个 window 对 象 的 属性 X 碟 window 对 象 的 属性 X 




































































政 朗 杖 机 权 提 示 村] 
字 宙 电子 ， 陪 伴 今生 , 陪 件 今生， 宇宙 电子 。 
图 5-2 ”状态 栏 默 认 的 显示 信息 图 5-3 单 击 “ 改 变 状态 栏 提示 ”按钮 后 的 状态 栏 显示 
代码 如 下 : 
<html> 
<head> 


<title> window 对 象 的 属性 < /title> 
< Script type= "text/javascript"> 
defaultstatus=" 守 宙 电 子 ,陪伴 今生 。"; 
functicn changeStatus (){ 
status= " 赔 伴 今生 ,宇宙 电子 。" 
} 
< /script> 
< /head> 
<body> 
< input type= "button" value= 路 变 状态 栏 提示 " onclick= "changeStatus()" /> 
< /body> 
< /htm> 
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5. 其 他 属性 


除了 以 上 常用 的 属性 ,document、location、history 这 3 个 下 级 对 象 也 被 作为 window 
对 象 的 属性 。 例 如 ,下 面 代码 将 自动 转 到 新 的 URL。 


<html> 
<head> 
< Script language= "JavaScript"> 
Window. location= "htbp: /ww.163.comy"7 // 新 的 UEL 
</script> 
< /head> 
<body> 
< 当前 网 页 < /p> // 本 内 容 来 不 及 显示 就 立即 转 到 新 的 URL 
< /body> 
< /htm> 


也 可 以 用 表单 实现 用 户 输 入 URL( 如 输入 http://www. sohu. com)。 





< form> 
Enter a URL: < input type= "text" name= "Url"> 
< input type= "button" value= "Go" onClick= "window.location= this.fom.url. 
Value"> 
< /fom> 


任何 一 个 浏览 器 对 象 都 被 看 作 它 上 级 对 象 的 属性 。 
5.2.2 window 对象 的 方法 


在 前 面 的 章节 已 经 使 用 了 prompt() ,alert() 和 confirm() 等 预定 义 函 数 ,在 本 质 上 是 
window 对 象 的 方法 。 除 此 之 外 ,window 对 象 还 提供 了 一 些 其 他 方法 , 见 表 5-2。 


表 5-2 ”window 对 象 的 常用 方法 
































方 ”法 描 述 
open() 打开 一 个 新 的 浏览 器 窗口 或 查找 一 个 已 命名 的 窗口 
close() 关闭 浏览 器 窗口 
alert() 显示 带 有 一 段 消息 和 一 个 确认 按钮 的 对 话 框 
prompt() 显示 可 提示 用 户 输入 的 对 话 框 
confirm() 显示 带 有 一 段 消 息 以 及 确认 按钮 和 取消 按钮 的 对 话 框 
moveBy(x,y) 可 相对 窗口 的 当前 坐标 将 它 移动 指定 的 像素 
moveTo(x»y) 可 把 窗口 的 左上 角 移 动 到 一 个 指定 的 坐标 (x,y) ,但 不 能 将 窗口 移出 屏幕 
setTimeout(code,millisec) | 在 指定 的 毫秒 数 后 调用 函数 或 计算 表达 式 , 仅 执行 一 次 
setInterval(code,millisec) | 按照 指定 的 周期 (以 毫秒 计 ) 来 调用 函数 或 计算 表达 式 
clearTimeout() 取消 由 setTimeout() 方 法 设置 的 计时 器 
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方 ”法 


描 述 





clearInterval() 


取消 由 setInterval() 设 置 的 计时 器 











focus() 可 把 键盘 焦点 给 予 一 个 窗口 
blurO) 可 把 键盘 焦点 从 顶层 窗口 移 开 
下 面具 体 介绍 几 种 常用 方法 。 


1. open () 方 法 


open() 方 法 用 于 打开 一 个 新 窗口 ,其 格式 如 下 : 
Var targetWindow= window.open (url,name, featuresyreplace) 


参数 features 用 于 设置 窗口 在 创建 时 所 具有 的 特征 ,如 标题 栏 、 莱 单 栏 .状态 栏 、 是 否 
全 屏 显示 等 特征 , 见 表 5-3。 


窗口 特征 


表 5-3 窗口 特征 
描 述 





channelmode 


是 否 使 用 channel 模式 显示 窗口 , 取 值 范围 yes|no|110, 默 认为 no 





directories 


是 否 添加 目录 按钮 , 取 值 范围 yes|no|110, 默 认为 yes 






































fullscreen 是 否 使 用 全 屏 模 式 显示 浏览 器 , 取 值 范 围 yes|no|110, 默 认为 no 
location 是 否 显示 地 址 栏 , 取 值 范围 yes|no|110, 默 认为 yes 
menubar 是 否 显示 菜单 栏 , 取 值 范围 yes|nol110, 默 认为 yes 

resizable 窗口 是 否 可 调节 尺寸 , 取 值 范围 yes|no|1|10, 默 认为 yes 
scrollbars 是 否 显示 滚动 条 , 取 值 范围 yes|no|1|10, 默 认为 yes 

status 是 否 添加 状态 栏 , 取 值 范围 yes|no|110, 默 认为 yes 

titlebar 是 否 显示 标题 栏 , 取 值 范围 yes|no|110, 默 认为 yes 

toolbar 是 否 显 示 浏览 器 的 工具 栏 , 取 值 范围 yes| no|110, 默 认为 yes 
width 窗口 显示 区 的 宽度 ,单位 是 像素 

height 窗口 显示 区 的 高 度 ,单位 是 像素 

left 窗口 的 y 坐标 ,单位 是 像素 

top 窗口 的 x 坐标 ,单位 是 像素 





例如 ,下 面 代码 在 显示 主页 时 打开 holder. html, 并 立即 关闭 。 


<htm> 
<head> 


< script language— "JavaScript"> 
Var PlaceHolder= window.cpen ("holger .html", "placeholger", "width= 200, 


height= 200"); 


</script> 


<title> The Main Page< /title> 


< /head> 


<body onLoad= "placeHolder.close()"™> 


// 改 为 onrcad= "placeHolder" 则 不 关闭 打开 的 窗口 
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<E> This is the main page< /p> 
< /pody> 
< /him> 


2. close () 方 法 

close() 方 法 用 于 关闭 指定 的 浏览 器 窗口 ,其 格式 如 下 : 

targetWindow.close() 

当 关 闭 当 前 页 面 时 ,参数 targetWindow 可 以 是 window 对 象 ,也 可 省 略 ; 当 关闭 当前 
页 面 中 所 打开 的 其 他 页 面 时 ,windowObject 为 目标 窗口 对 象 。 

3. alert () 方 法 

alert() 方 法 用 于 弹出 警告 框 ,参数 为 警告 信息 ,其 格式 如 下 : 

alert ("text"); 

参数 text 可 以 是 一 个 表达 式 ,最终 alert() 方 法 接收 到 的 是 字符 串 值 。 

4. confirm () 方 法 

confirm() 方 法 用 于 弹出 确认 框 ,参数 为 确认 信息 ,其 格式 如 下 : 

conflm("text") ; 


类 似 于 alert() 方 法 ,confirm() 方 法 只 接收 1 个 参数 ,并 转换 为 字符 串 值 显示 。 而 
confirm() 方 法 还 会 产生 一 个 值 为 true 或 false 的 结果 , 即 返 回 一 个 布尔 值 。 当 浏览 者 单 
击 对 话 框 中 的 “确定 ”按钮 ,confirm() 方 法 将 返回 true; 单 击 对 话 框 中 的 “取消 ”按钮 ， 
confirm() 方 法 将 返回 false。JavaScript 程序 可 以 使 用 判断 语句 对 这 两 种 值 做 出 不 同 处 
理 , 以 达到 显示 不 同 结果 的 目的 。 


5. prompt () 方 法 


prompt() 方 法 用 于 提示 对 话 框 ,一 般 用 于 类 似 题 目测 试 这 样 的 小 程序 。 提 示 对 话 框 
显示 一 段 提示 文本 ,其 下 面 是 一 个 等 待 浏览 者 输入 的 文本 框 ,并 伴 有 “确定 ”和 “取消 ”" 按 
钮 ,其 格式 如 下 : 





Prarpt (text, defaultText) 


参数 text 为 提示 信息 ,defaultText 为 默认 值 。 例 如 ,下 面 代码 执行 时 弹出 提示 对 话 
框 ,要 求 用 户 输入 文本 ,确认 后 显示 输入 的 文本 。 


<html> 
< head> 
< script languagar "JavaScript"> 
var test=window.prampt ("请 输入 数据 : ",""); 
dpcument .write ("<p style= 'font: 9pt;color: #009900"> 您 输入 的 是 : "+ 
testt "< /p> "); 
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</script> 
< /head> 
< /htm> 


6. setTimeout () 方 法 


setTimeout() 方 法 用 于 设置 一 个 计时 器 ,在 指定 的 时 间 间 隔 后 调用 函数 或 计算 表达 
式 , 且 仅 执行 一 次 ,其 格式 如 下 : 


Var qd_of timeout= setTimeout (code,millisec) 

其 中 : 

(1) 参数 code 必需 ,表示 被 调用 的 函数 或 需要 执行 的 JavaScript 代码 串 。 

(2) 参数 millisec 必需 ,表示 在 执行 代码 前 需 等 待 的 时 间 ( 以 毫秒 计 )。 

(3) code 代码 仅 被 执行 一 次 。 

(4) setTimeout() 方 法 返回 一 个 计时 器 的 ID。 

【 例 5-2】 设置 计时 器 ,页 面 初次 加 载 时 显示 初始 的 提示 信息 , 延 时 5000ms 后 再 调 


用 hello() 函数 ,显示 其 对 话 框 ,本 例文 件 5-2. html 在 浏览 器 中 显示 的 效果 如 图 5-4 和 
图 5-5 所 示 。 


全 DAweb\ch5\5-2ht P - Ox) 
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图 5-4 页 面 初次 加 载 时 显示 的 信息 图 5-5 延 时 5000ms 后 显示 对 话 框 
代码 如 下 : 


<html> 
<head> 
<title> 计 时 器 < /title> 
<script> 
finction hello() { 
window.alert ("欢迎 您 1"); 
} 
window.setTimeout ("hello() ", 5000) ; // 延 时 5000ms 后 再 调用 hello() 函 数 
< /script> 
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< /head> 
<body> 
<ha> 宇 宙 电 子 < /h3> 
< /body> 
< /htm> 


7. clearTimeout () 方 法 


clearTimeout() 方 法 用 于 取消 由 setTimeout() 方 法 所 设置 的 计时 器 ,其 格式 如 下 : 


ClearTimeout (id_ Of timeout) 





其 中 ,参数 id_Of_timeout 表示 由 setTimeout() 方 法 返回 的 计时 器 ID。 
8. setInterval () 方 法 


setInterval() 方 法 用 于 设置 一 个 定时 器 ,按照 指定 的 周期 (以 毫秒 计 ) 调 用 函数 或 计 
算 表 达 式 ,其 格式 如 下 : 

Var id Of Interval= setInterval (code,millisec) 

其 中 ， 

(1) 参数 code 必需 ,表示 被 调用 的 函数 或 需要 执行 的 JavaScript 代码 串 。 

(2) 参数 millisec 必需 ,表示 调用 code 代码 的 时 间 间 隔 ( 以 毫秒 计 ) 。 

(3) setInterval() 方 法 返回 一 个 定时 器 的 ID。 

(3) setInterval( ) 方 法 会 不 停 地 调用 code 代码 ,直到 被 clearInterval() 方 法 取消 或 关 
闭 窗口 。 


_ 


9.clearInterval () 方 法 


clearInterval() 方 法 用 于 取消 由 setInterval() 方 法 所 设置 的 定时 器 ,其 格式 如 下 : 
clearInterval (id Of _Interval) 


其 中 ,参数 id_Of_Interval 表示 由 setInterval() 方 法 返回 的 计时 器 ID。 
53 docunent 对 象 


文档 (document) 对 象 包含 当前 网 页 的 各 种 特征 ,是 window 对 象 的 子 对 象 ,是 指 在 浏 
览 器 窗口 中 显示 的 内 容 部 分 ,如 标题 .背景 .使 用 的 语言 等 。 


5.3.1 document 对 象 的 属性 


document 对 象 的 属性 见 表 5-4。 
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表 5-4 document 对 和 象 的 属性 
































属 性 描 述 

body 提供 对 body 元 素 的 直接 访问 

cookie 设置 或 查询 与 当前 文档 相关 的 所 有 cookie 

referrer 返回 载 人 当前 文档 的 URL 

URL 返回 当前 文档 的 URL 

lastModified 返回 文档 最 后 被 修改 的 日 期 和 时 间 

domain 返回 下 载 当前 文档 的 服务 器 域名 

all[] 返回 对 文档 中 所 有 HTML 元 素 的 引用 , all[ ] 已 经 被 document 对 象 的 
getElementByld() 等 方法 替代 

forms[ ] 返回 对 文档 中 所 有 的 form 对 象 集合 

images[ J] 返回 对 文档 中 所 有 的 image 对 象 集合 ,但 不 包括 由 二 object 二 标签 内 定义 的 图 像 


【 例 5-3】 在 下 面 例子 中 ,网 页 的 初始 背景 色 为 浅 灰 色 , 单 击 “ 红 色 ” 按 钮 ,将 把 网 页 
的 背景 色 改变 为 红色 ,本 例文 件 5-3. html 在 浏览 器 中 显示 的 效果 如 图 5-6 和 图 5-7 所 示 。 


Ole nse 


大 document 对 象 的 属性 示例 X 




















单 击 按钮 网 页 背景 将 变 为 红色 








图 5-6 网 页 的 初始 背景 色 图 5-7 单 击 “ 红 色 ” 按 钮 改变 网 页 的 背景 色 


代码 如 下 : 


<htm> 
<head> 


<title> document 对 象 的 属性 示例 < /title> 
< Script language= "JavaScript"> 
document.bgColor= " 啡 cccccc"7 // 原 来 的 颜色 为 浅 灰 色 
functicn changecolor () { /动态 改变 颜色 
Gocument .bgColor= "red"7 


} 


< /script> 


< /head> 


< body bgcolor= "white" style= "font: pt"> 
<h3> 单 击 按钮 网 页 背景 将 变 为 红色 < /h3> 


<fom> 
< input type= "button" value= 呈 色 " onclick= "changecolor()"™> 
< /fom> 
< /pody> 
< /htm> 
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5.3.2 document 对 和 象 的 方法 


document 对 象 的 方法 从 整体 上 分 为 两 大 类 。 
(1) 对 文档 流 的 操作 。 

(2) 对 文档 元 素 的 操作 。 

document 对 象 的 方法 见 表 5-5。 


表 5-5 ”document 对 象 的 方法 




















方 法 描 述 

open() 打开 一 个 新 文档 ,并 探 除 当 前 文档 的 内 容 
write() 向 文档 写 人 HTML 或 JavaScript 代码 

与 write() 方 法 作用 基本 相同 ,在 每 次 内 容 输出 后 额外 加 一 个 换行 符 
wane (\m) ,在 使 用 一 pre> 标 签 时 比较 有 用 
close() 关闭 一 个 由 document. open() 方 法 打开 的 输出 流 , 并 显示 选 定 的 数据 
getElementById() 返回 对 拥有 指定 ID 的 第 一 个 对 象 
getElementsByName() 返回 带 有 指定 名 称 的 对 象 的 集合 





getElementsByTagName() 返回 带 有 指定 标签 名 的 对 象 的 集合 
getElementsByClassName() 返回 带 有 指定 class 属性 的 对 象 集合 ,该 方法 属于 HTML 5 DOM 








在 document 对 象 的 方法 中 ,open() 、write()、writeln() 和 close() 方 法 可 以 实现 文 
档 流 的 打开 .、 写 人 关闭 等 操作 ;而 getElementById ()、getElementsByName ()、 
getElementsByTagName() ,getElementsByClassName() 等 方法 用 于 操作 文档 中 的 元 素 。 


1. open () 方 法 
open() 方 法 用 于 打开 一 个 新 文档 。 
2. write () 和 writeln () 方 法 


write() 和 writeln() 方 法 都 是 用 于 向 文档 流 中 输出 内 容 ; 当 输出 内 容 为 纯 文本 时 ,将 
在 页 面 中 直接 显示 ; 当 输 出 内 容 为 HTML 标签 时 ,由 浏览 器 解析 后 并 进行 显示 。 

writeln() 与 write() 基 本 相同 .区 别 在 于 writeln() 每 次 输出 结果 之 后 额外 加 一 个 换 
行 符 (\n)。 页 面 中 的 换行 通常 使 用 二 br/ 二 标签 而 非 换行 符 (\n) ,换行 符 仅 在 二 pre 二 标 
签 中 起 作用 。 


3. close () 方 法 


close() 用 于 关闭 当前 文档 。 

【 例 5-4】 文档 的 打开 、 写 入 、 关 闭 操 作 。 网 页 加 载 后 显示 文档 的 原始 内 容 , 单 击 “ 单 
击 将 显示 新 文档 ”按钮 ,用 新 文档 的 内 容 蔡 换 浏览 器 中 的 原始 内 容 , 本 例文 件 5-4. html 在 
浏览 器 中 显示 的 效果 如 图 5-8 和 图 5-9 所 示 。 
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七 ileyWDyweb/chs/ PC»> 多 fle///Di/web/ch5/ 了” 
您 document 对 铺 的 方法 示例 x 称 D\web\ch5\5-4.html x 


文档 新 文档 内 容 















































file:///D:/web/ch5/5-4.htm 把 100% 
图 5-8 文档 的 原始 内 容 图 5-9 替换 后 的 文档 内 容 
代码 如 下 : 


<bhtm> 
<head> 
<title> document 对 象 的 方法 示例 < /title> 
< Script language= "JavaScript"> 
function newDocument () { 


document .open ()7 // 打 开 一 个 新 文档 
document.write ("<p> 新 文档 内 容 < /p> "); // 向 文档 流 中 输出 内 容 
document .close (); // 关 闭 当 前 文档 
} 
< /script> 
< /head> 
<body> 
< 户 文 档 正文 < /p> 
<p> <a href- 嘎 " onclick= "newpocument () 吃 单 击 将 显示 新 文档 < /a>< /p> 
< /pody> 


</htm> 
4. getElementById () 方 法 


getElementById() 方 法 用 于 返回 指定 ID 的 元 素 。 当 页 面 中 有 多 个 ID 相同 的 元 素 
时 ,只 返回 第 一 个 符合 条 件 的 元 素 。 在 页 面 元 素 操作 时 ,元 素 的 ID 应 尽量 唯一 ,以 免 因 浏 
览 器 不 兼容 而 导致 无 法 实现 页 面 效 果 。 


5. getElementsByName () 方 法 


getElementsByName() 方 法 用 于 返回 指定 name 属性 的 元 素 集合 ,多 用 于 单行 文本 
框 和 复 选 框 等 具有 name 属性 的 元 素 。 


6. getElementsByTagName () 方 法 


getElementsByTagName() 方 法 用 于 返回 指定 标签 名 的 元 素 集合 ,元 素 在 集合 中 的 
顺序 即 是 其 在 文档 中 的 顺序 。 当 参数 为 * * "时 ,将 返回 页 面 中 所 有 的 标签 元 素 。 


7. getElementsByClassName () 方 法 


getElementsByClassName() 用 于 返回 指定 class 属性 的 元 素 集合 ,该 方法 属于 
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HTML 5 DOM 中 新 定义 的 方法 ,在 IE 8 及 之 前 版 本 中 无 效 。 

【 例 5-5】 使 用 getElementByld()、getElementsByName()、getElementsByTagName () 
方法 操作 文档 中 的 元 素 。 浏 览 者 填写 表单 中 的 选项 后 , 单 击 “ 统 计 结 果 ” 按 钮 ,弹出 消息 框 
显示 统计 结果 ,本 例文 件 5-5. html 在 浏览 器 中 显示 的 效果 如 图 5-10 所 示 。 

















Ee 
[ierweb/chs/55hm# DP-ox| 人 全 信 
爸 documentj 旬 的 方法 x 
用 户 名 ， 王 小 虎 
爱好， 回 听 音 乐 





















































足球 回 旅游 





及。 ID 为 userName 的 元 素 的 值 : 王 小 才 
LS sme 为 hobby 的 元 素 的 人 数 :3 
个 人 要 好 : 昕 音乐 旅游 
标签 为 input 的 元 素 的 个 数 : 5 





图 5-10 例 5-5 的 页 面 显示 效果 


代码 如 下 : 


< ldoctype html> 
<html> 
<head> 
<title> document 对 象 的 方法 < /title> 
< Script typer "text/javascript"> 
functicn count (){ 
Var UserName= document .getElementById ("userName"); 
var hobby= document .getElement.sByName ("hobby") ; 
var inputs= document .getElement.sByTagName ("input") ; 
var result= "ID 为 userName 的 元 素 的 值 : "+ userName.valuer "\nname 为 
hobpy 的 元 素 的 个 数 : "+ habby.lengtht "\n\t 个 人 爱好 : "; 
for (var i=0;i< hobby.length;i++){ 
if (hobby[i] .checked) { 
result+=hobby[i] .valuet " "; 
} 
result+="\n 标 签 为 input 的 元 素 的 个 数 : "+ inputs.length 
alert (result); 
} 
< /script> 
< head> 
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< body> 
< formn name= "myform> 
用 户 名 : < input type= "text" name= "userName" id "userName" /><br/> 
爱 好 : <input type= "checkbox" name= "hobby" value= 听 音 乐 "/> 听 音乐 
< input type= "checkbox" name= "hobby" value= "足球 "/> 足 球 
< input type= "checkbox" name= "hobby" value= "旅游 "> 旅游 <br/> 
< input type= "button" value= 喀 计 结果 " onclick= "count 0) "/> 
</form> 
< /pody> 
< /html> 


54 locaion 对 象 


位 置 (location) 对 象 是 window 对 象 的 子 对 象 , 用 于 提供 当前 窗口 或 指定 框架 的 URL 
地 址 。 


5.4.1 location 对 象 的 属性 


location 对 象 中 包含 当前 页 面 的 URL 地 址 的 各 种 信息 ,例如 ,协议 .主机 服务 器 和 端 
口号 等 ,location 对 象 的 属性 见 表 5-6 。 


表 5-6 location 对 象 的 属性 


























属 性 描 述 
protocol 设置 或 返回 当前 URL 的 协议 
host 设置 或 返回 当前 URL 的 主机 名 称 和 端口 号 
hostname 设置 或 返回 当前 URL 的 主机 名 
port 设置 或 返回 当前 URL 的 端口 部 分 
pathname 设置 或 返回 当前 URL 的 路 径 部 分 
href 设置 或 返回 当前 显示 的 文档 的 完整 URL 
hash URL 的 锚 部 分 (从 并 号 开始 的 部 分 ) 
search 设置 或 返回 当前 URL 的 查询 部 分 (从 问号 “?” 开 始 的 参数 部 分 ) 





5.4.2 location 对 象 的 方法 


location 对 象 提 供 了 以 下 3 个 方法 ,用 于 加 载 或 重新 加 载 页 面 中 的 内 容 ,location 对 
象 的 方法 见 表 5-7。 
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表 5-7 location 对 象 的 方法 
方 法 描 ” 述 
assign(url) 可 加 载 一 个 新 的 文档 ,与 location. href 实现 的 页 面 导航 效果 相同 
用 于 重新 加 载 当 前 文档 ; 当 参 数 force 默认 为 false 时 ; 当 参 数 force 为 false 且 文 档 内 
容 发 生 改 变 时 ,从 服务 器 端 重新 加 载 该 文档 ; 当 参 数 force 为 false 但 文档 内 容 没 有 改 
变 时 ,从 缓存 区 中 装载 文档 ; 当 参 数 force 为 true 时 ,每 次 都 从 服务 器 端 重新 加 载 该 
文档 


replace(url) “| 使 用 一 个 新 文档 取代 当前 文档 , 且 不 会 在 history 对 象 中 生成 新 的 记录 








reload(force) 








55 history 对 象 


历史 (history) 对 象 用 于 保存 用 户 在 浏览 网 页 时 所 访问 过 的 URL 地 址 ,history 对 象 
的 length 属性 表示 浏览 器 访问 历史 记录 的 数量 。 由 于 隐私 方面 的 原因 ,JavaScript 不 允 
许 通 过 history 对 象 获取 已 经 访问 过 的 URL 地 址 。 

history 对 象 提供 了 back() forward() 和 go() 方 法 来 实现 针对 历史 访问 的 前 进 与 后 
退 功能 , 见 表 5-8。 














表 5-8 history 对 象 的 方法 











方 法 描 述 
back() 加 载 history 列表 中 的 前 一 个 URL 
forward() 加 载 history 列表 中 的 下 一 个 URL 
go() 加 载 history 列表 中 的 某 个 具体 页 面 





【 例 5-6】 下 面 程序 建立 * 上 一 页 ”和 “下 一 页 ”按钮 ,模仿 浏览 器 的 “前 进 ”" 和 “后 退 ” 
按钮 ,本 例文 件 5-6. html 在 浏览 器 中 显示 的 效果 如 




















图 5-11 所 示 。 S| ile///o/web/chs/ P- Sx| 辜 
代码 如 下 : 多 万 = 对 全 全 
<htbm> 历史 对 象 示例 
< head> 


单 击 下 面 按钮 后 退 一 页 或 前 进 一 页 


<title> 历 史 对 象 示 例 < /title> 
上 一 页 ] [下 二 页 
a 


finction back() 
{ window.history.back() ;} 
finction forward() 图 5-11 例 5-6 的 页 面 显示 效果 
{ window.history.forward(); } 
< /script> 
< /head> 
<body> 
<div aligr "center™> 
<h3> 历 史 对 象 示例 < /ha> <hr> 





夺 100% ~ 
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< fom> 


单 击 下 面 按钮 后 退 一 页 或 前 进 一 页 <br> 
< input type= "button" value= < 上 一 页 " onclick= "back()"> 
< input type= "button" value= "> 下 一 页 " onclick= "forward()"> 


< /fom> 


</div> 
< /body> 


< /htm> 


56 ”fom 对象 


form 对 象 是 document 对 象 的 子 对 象 ,通过 form 对 象 可 以 实现 表单 验证 等 效果 。 通 
过 form 对 象 可 以 访问 表单 对 象 的 属性 及 方法 。 语 法 格式 如 下 : 


dbcument. 表 单 名称 .属性 
document. 表 单 名 称 .方法 (参数 ) 
document .forms [索引]. 属 性 
document .forms [索引]. 方 法 (参数 ) 


5.6.1 form 对 象 的 属性 


form 对 象 的 属性 见 表 5-9。 


属 性 


表 5-9 form 对 象 的 属性 
描 述 





elements[] 


返回 包含 表单 中 所 有 元 素 的 数组 ;元 素 在 数组 中 出 现 的 顺序 与 在 表单 中 出 现 的 顺序 
相同 





设置 或 返回 用 于 编码 表单 内 容 的 MIME 类 型 ,默认 值 是 "application/x-www-form- 

















SIO urlencoded"; 当 上 传 文件 时 ,enctype 属性 应 设 为 "multipart/form-data" 

target 可 设置 或 返回 在 何 处 打开 表单 中 的 action-URL, 可 以 是 _blank、self、parent、_top 
method 设置 或 返回 用 于 表单 提交 的 HTTP 方法 

length 用 于 返回 表单 中 元 素 的 数量 

action 设置 或 返回 表单 的 action 属性 

name 返回 表单 的 名 称 





5.6.2 form 对 和 象 的 方法 


form 对 象 的 方法 见 表 5-10。 
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表 5-10 ”form 对 象 的 方法 








方 法 描 述 
submit() 表单 数据 提交 到 Web 服务 器 
reset() 对 表单 中 的 元 素 进行 重 置 





提交 表单 有 两 种 方式 : 即 提交 按钮 submit 和 提交 方法 submit() 。 

在 去 form> 标 签 中 ,onsubmit 属性 用 于 指定 在 表单 提交 时 调用 的 事件 处 理 函 数 ;在 
onsubmit 属性 中 使 用 return 关键 字 表 示 根 据 被 调用 函数 的 返回 值 来 决定 是 否 提 交 表 单 ， 
当 函 数 返回 值 为 true 时 则 提交 表单 ,否则 不 提交 表单 。 





57 JavaScript 的 对 象 事件 处 理 程 序 


5.7.1 对 象 的 事件 


在 JavaScript 中 ,事件 是 预先 定义 好 的 、 能 够 被 对 象 识别 的 动作 ,事件 定义 了 用 户 与 
网 页 交互 时 产生 的 各 种 操作 。 例 如 , 单 击 按钮 时 ,就 产生 一 个 事件 ,告诉 浏览 器 发 生 了 需 
要 进行 处 理 的 单 击 操作 。 浏 览 器 一 些 动 作 也 可 能 产生 事件 ,例如 ,浏览 器 载 入 一 个 网 页 
时 ,就 会 产生 Load 事件 。 当 事件 发 生 时 ,JavaScript 将 检测 两 条 信息 , 即 发 生 的 是 哪 种 事 
件 和 哪个 对 象 接收 了 事件 。 

每 种 对 象 能 识别 一 组 预先 定义 好 的 事件 ,但 并 非 每 一 种 事件 都 会 产生 结果 ,因为 
JavaScript 只 是 识别 事件 的 发 生 。 为 了 使 对 象 能 够 对 某 一 事件 做 出 响应 (Respond) ,就 必 
须 编写 事件 处 理 函数 。 

事件 处 理 函数 是 一 段 独立 的 程序 代码 , 它 在 对 象 检测 到 某 个 特定 事件 时 执行 (响应 该 
事件 )。 一 个 对 象 可 以 响应 一 个 或 多 个 事件 ,因此 可 以 使 用 一 个 和 多 个 事件 过 程 对 用 户 或 
系统 的 事件 做 出 响应 。 程 序 员 只 需 编 写 必须 响应 的 事件 函数 ,而 其 他 无 用 的 事件 过 程 则 
不 必 编 写 ,如 命令 按钮 的 “ 单 击 ”(Click) 事 件 比较 常见 ,其 事件 函数 需要 编写 ,而 其 
MouseDown 或 MouseUp 事件 则 可 有 可 无 ,程序 员 可 根据 需要 选择 。 

利用 JavaScript 实现 交互 功能 的 Web 网 页 基本 拥有 以 下 3 部 分 的 内 容 。 

(1) 在 head 部 分 定义 一 些 JavaScript 函数 ,其 中 的 一 些 可 能 是 事件 处 理 函 数 ,另外 一 
些 可 能 是 为 了 配合 这 些 事件 处 理 函 数 而 编写 的 普通 函数 。 

(2) HTML 本 身 的 各 种 格式 控制 标记 。 

(3) 拥有 句柄 属性 的 HTML 标记 ,主要 涉及 一 些 界面 元 素 。 这 些 元 素 可 把 HTML 
与 JavaScript 代码 相连 。 

句柄 就 是 界面 对 象 的 一 个 属性 ,以 存储 特定 事件 处 理 函 数 的 信息 。 每 当 事 件 发 4 
JavaScript 自动 查找 界面 对 象 中 相应 的 事件 句柄 ,调用 注册 在 上 面 的 事件 处 理 函 数 。 

一 般 的 句柄 形式 总 是 在 事件 的 名 称 前 面 加 前 绥 on, 例 如 对 应 事件 Load 的 句柄 就 是 
onLoad。 
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事件 句柄 不 但 可 在 发 生 HTML 语言 中 注册 ,还 可 使 用 JavaScript 语句 注册 在 界面 对 
象 上 。 事 件 句 柄 不 仅 可 在 发 生 实际 的 用 户 事件 时 由 浏览 器 调用 ,也 可 以 在 JavaScript 中 
调用 。 

尽 可 能 利用 函数 的 形式 来 定义 所 有 事件 的 句柄 ,因为 通常 事务 处 理 不 是 几 个 语句 能 
够 解决 的 ,而 太 长 的 语句 会 严重 影响 文件 的 可 读 性 ,加 重 浏览 器 的 负担 ,甚至 导致 浏览 器 
的 崩溃 。 

对 象 事件 有 3 类 。 

(1) 用 户 引起 的 事件 ,如 网 页 装载 .表单 提交 等 。 

(2) 引起 页 面 之 间 跳 转 的 事件 ,主要 是 超 链 接 。 

(3) 表单 内 部 与 界面 对 象 的 交互 ,包括 界面 对 象 的 改变 等 。 这 类 事件 可 以 按照 应 用 
程序 的 具体 功能 自由 设计 。 





5.7.2 常用 的 事件 及 处 理 


1. 浏览 器 事件 


浏览 器 事件 主要 由 Load、Unload 以 及 Submit 等 事件 组 成 。 

(1) Load 事件 。Load 事件 发 生 在 浏览 器 完成 一 个 窗口 或 一 组 框架 的 装载 之 后 。 
onLoad 句柄 在 Load 事件 发 生 后 由 JavaScript 自动 调用 执行 。 因 为 这 个 事件 处 理 函 数 可 
在 其 他 所 有 的 JavaScript 程序 和 网 页 之 前 被 执行 ,可 以 用 来 完成 网 页 中 所 用 数据 的 初始 
化 ,如 弹出 一 个 提示 窗口 ,显示 版 权 或 欢迎 信息 ,弹出 密码 认证 窗口 等 。 例 如 : 


< body onLoad= "window.alert (Pleae input password!")> 


网 页 开始 显示 时 并 不 触发 Load 事件 ,只 有 当 所 有 元 素 ( 包 含 图 像 声音 等 ) 被 加 载 完 
成 后 才 触 发 Load 事件 。 
例如 ,下 面 的 代码 可 以 在 加 载 网 页 时 显示 对 话 框 说 明 已 经 触发 了 Load 事件 。 


<html> 
<head><title> Ioad 事 件 过 程 < /title> 
< Script language= "javascript"> 
function init() 
{ ”wingow.alert ("触发 了 Icad 事 件 "); 
} 
< /script> 
< /head> 
<body onLoad= "init() 吃 网 页 内 容 < /body> 
< /htm> 


(2) Unload 事件 。Unload 事件 发 生 在 用 户 在 浏览 器 的 地 址 栏 中 输入 一 个 新 的 
URL, 或 者 使 用 浏览 器 工具 栏 中 的 导航 按钮 ,从 而 使 浏览 器 试图 载 和 新 的 网 页 。 在 浏览 
器 载 人 新 的 网 页 之 前 ,自动 产生 一 个 Unload 事件 ,通知 原 有 网 页 中 的 JavaScript 脚本 
程序 。 
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onUnload 事件 句柄 与 onLoad 事件 句柄 构成 一 对 功能 相反 的 事件 处 理 模式 。 使 用 
onLoad 事件 句柄 可 以 初始 化 网 页 ,而 使 用 onUnload 事件 句柄 则 可 以 结束 网 页 。 

下 面 例子 在 打开 HTML 文件 时 显示 “欢迎 ”, 在 关闭 浏览 器 窗口 时 显示 “再见”。 

<html> 

<body onIoad "alert ("欢迎 ')" onUnload= "alert(' 青 见 ')"> 

网 页 内 容 

< /pody> 

< /htm> 

(3) Submit 事件 。Submit 事件 在 完成 信息 的 输入 ,准备 将 信息 提交 给 服务 器 处 理 时 
发 生 。onSubmit 句柄 在 Submit 事件 发 生 时 由 JavaScript 自动 调用 执行 。onSubmit 句柄 
通常 在 二 form 之 标记 中 声明 。 

为 了 减少 服务 器 的 负担 ,可 在 Submit 事件 处 理 函数 中 实现 最 后 的 数据 校 验 。 如 果 所 
有 的 数据 验证 都 能 通过 , 则 返回 一 个 true 值 ,让 JavaScript 向 服务 器 提交 表单 ,把 数据 发 
送 给 服务 器 ;否则 ,返回 一 个 false 值 , 禁 止 发 送 数据 , 且 给 用 户 相 关 的 提示 ,让 用 户 重 新 输 
入 数据 。 

【 例 5-7】 本 例 是 一 个 在 提交 时 检查 条 件 是 否 满足 要 求 的 简单 程序 。 首 先 定义 了 一 
个 文本 输入 框 ,要 求 用 户 在 此 文本 框 中 输入 一 个 在 a” 和“z” 之 间 的 小 写字 母 。 在 用 户 提 
交 表单 时 ,就 用 check() 函 数 对 文本 框 中 的 内 容 进行 校 验 。 若 输入 文本 框 中 的 是 一 个 小 
写字 母 ,就 提交 表单 ;否则 就 给 出 提示 ,并 保持 当前 的 表单 ,本 例文 件 5-7. html 在 浏览 器 
中 显示 的 效果 如 图 5-12 所 示 。 


|@) bswebvehs\5-7html DPCxl 
僻 检查 志 单 x 


输入 一 个 a 到 z 之 间 的 字母 (a, z 除 外 )， a 






































全 撞 入 值 3 起 出 了 允许 的 范围! 





Cw] 








蕊 100% ~ 





图 5-12 例 5-7 的 页 面 显示 效果 


代码 如 下 : 


<html> 
<head> 
<title> 检 查 表单 < /title> 
< script language— "JavaScript"> 
fancticn check() { 
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Var val= document .chfom.textname .value; 
if("a"<val && val< "z") 
retum(true); 
else { 
alert ("输入 值 "+val+ "超出 了 允许 的 范围 1"); 
retum (false);} 
} 
< /script> 
< headq> 
<body> 
< form name= "chform" method= "post" onSutmit= "check()"> 
< 户 输入 一 个 a 到 z 之 间 的 字母 az 除外 ): 
< input type= "text" name= "textname" value= "a" size= "10"> < /p> 
< input type= "submit"> 
</form 
< /pody> 
< /html> 


2. 鼠标 事件 


常用 的 鼠标 事件 有 MouseDown、MouseMove、MouseUp、MouseOver、 MouseOut、 
Click、Blur 以 及 Focus 等 。 

(1) MouseDown 事件 。 当 按 下 鼠标 的 某 一 个 键 时 发 生 MouseDown 事件 。 在 这 个 
事件 发 生 后 ,JavaScript 自动 调用 onMouseDown 句柄 。 

在 JavaScript 中 ,如 果 发 现 一 个 事件 处 理 函 数 返回 false 值 ,就 中 止 事件 的 继续 处 理 。 
如 果 MouseDown 事件 处 理 函 数 返 回 false 值 ,与 鼠标 操作 有 关 的 其 他 一 些 操作 ,例如 拖 
放 激活 超 链 接 等 都 会 无 效 , 因 为 这 些 操作 首先 都 必须 产生 MouseDown 事件 。 

这 个 句柄 适用 于 网 页 ,普通 按钮 以 及 超 链接 。 

(2) MouseMove 事件 。 移动 鼠 标 时 ,发 生 MouseMove 事件 。 这 个 事件 发 生 后 ， 
JavaScript 自动 调用 onMouseMove 句柄 。MouseMove 事件 不 从 属于 任何 界面 元 素 。 只 
有 当 一 个 对 象 (浏览 器 对 象 window 或 者 document) 要 求 捕获 事件 时 ,这 个 事件 才 在 每 次 
鼠标 移动 时 产生 。 

(3) MouseUp 事件 。 释 放 鼠 标 键 时 ,发 生 MouseUp 事件 。 在 这 个 事件 发 生 后 ， 
JavaScript 自动 调用 onMouseUp 句柄 。 这 个 事件 同样 适用 于 普通 按钮 .网 页 以 及 超 
链接 。 

与 MouseDown 事件 一 样 ,如果 MouseUp 事件 处 理 函 数 返回 false 值 ,与 鼠标 操作 密 
切 相关 的 其 他 操作 ,例如 拖 放 、 选 定 文 本 以 及 激活 超 链 接 都 无 效 ,因为 这 些 操 作 首 先 都 必 
须 产 生 MouseUp 事件 。 

(4) MouseOver 事件 。 当 光标 移动 到 一 个 对 象 上 面 时 ,发 生 MouseOver 事件 。 在 
MouseOver 事件 发 生 后 ,JavaScript 自动 调用 执行 onMouseOver 句柄 。 

在 通常 情况 下 , 当 光 标 扫 过 一 个 超 链接 时 , 超 链接 的 目标 会 在 浏览 器 的 状态 栏 中 显 
示 ; 也 可 通过 编程 在 状态 栏 中 显示 提示 信息 或 特殊 的 效果 ,使 网 页 更 具有 变化 性 。 在 下 面 
的 示例 代码 中 ,第 1 行 代码 当 光 标 在 超 链接 上 时 可 在 状态 栏 中 显示 指定 的 内 容 , 第 2 一 
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4 行 代码 是 当 光 标 在 文字 或 图 像 上 时 ,弹出 相应 的 对 话 框 。 


<a href= "http: /ww-schu-com/" onMouseOver= "window.status= ' 你 好 吗 ';retum 
true"> 请 单 击 < /a> 
<ahref "alert ("弹出 信息 !1') 吃 显示 的 链接 文字 < /a> 
< img src= "imagel.jpg" onMouseOver= "alert (' 在 图 像 之 上 ');"><br> 
<a href- 啡 " qqMpuseOver== "window.alert (' 在 链接 之 上 ');"> < jmg src= "image2.jpg> 
</a><hr> 
(5) MouseOnut 事件 。MouseOnut 事件 发 生 在 光标 离开 一 个 对 象 时 。 在 这 个 事件 发 
生 后 ,JavaScript 自动 调用 onMouseOut 句柄 。 这 个 事件 适用 于 区 域 . 层 及 超 链 接 对 象 。 
下 例 是 一 个 使 用 MouseOut 事件 句柄 的 实例 。 每 次 当 光 标 在 对 象 上 面 移动 并 离开 它 
时 ,就 会 弹出 对 话 框 。 需 要 注意 的 是 ,用 户 是 被 迫 地 接收 信息 ,多 次 重复 这 一 过 程 ,就 会 不 
能 忍受 ,所 以 要 慎 用 这 样 的 事件 。 
【 例 5-8〗】 MouseOnut 事件 示例 。 浏 览 者 将 鼠标 移 至 页 面 中 的 "搜狐 网 ?链接 并 离开 
它 时 ,将 弹出 确认 框 ,如 果 单 击 “ 确 定 ” 按 钮 , 则 页 面 跳 转 至 “搜狐 网 ”的 主页 ,本 例文 
件 5-8. html 在 浏览 器 中 显示 的 效果 如 图 5-13 和 图 5-14 所 示 。 


可 全 DAweb\ch5\5-8html Dp-ox]r 2 
忆 Mouseout 事 件 x 
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避 | 国 pswebvhss-ehml Pdx| 仙 安 齐 
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http://www.sohu.com/ 或 100% ~ http://www.sohu.com/ 县 100% > 











图 5-13 光标 移 至 “搜狐 网 "链接 图 5-14 光标 离开 链接 后 弹出 确认 框 


代码 如 下 : 


<html> 
< head> 
<title>Mpuseout 事 件 < /title> 
< script language= "JavaScript"> 
fimction wam(){ 
if (confimm(" 下 面 将 自动 转 到 搜狐 网 ")) 
window.location= "http: //www.sohu.com"; 
} 
</script> 
< /head> 
<body> 
<E> <a href= "http: //www.schu.com" onMpuseOut= "wam() 吃 搜狐 网 < /a>< /p> 
< /body> 
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< /htm> 


(6) Click 事件 。Click 事件 可 在 两 种 情况 下 发 生 。 首 先 ,在 一 个 表单 上 的 某 个 对 象 
被 单 击 时 发 生 ;其 次 ,在 单 击 一 个 超 链接 时 发 生 。onClick 事件 句柄 在 Click 事件 发 生 后 
由 JavaScript 自动 调用 执行 。onClick 事件 句柄 适用 于 普通 按钮 .提交 按钮 . 单 选 按钮 、 复 
选 框 以 及 超 链 接 。 下 面 代 码 用 于 单 击 图 像 后 弹出 一 个 对 话 框 。 


< img src= "imagel.jpg" onclick= "window.alert (' 单 击 图 像 ');"><br> 
例如 ,下 面 程序 检查 文本 框 中 输入 的 内 容 , 并 在 信息 框 中 显示 出 来 。 


<body> 
< form name= "myFom"> 
< input type= "text" name= "myText"> 
< /form> 
<a href="#" onClick= "window.alert (document .myForm.myText .value);"> 检查 文 
本 框 < /a> 
< /body> 
MouseDown 和 MouseUp 的 事件 处 理 函 数 一 样 ,如 果 通 过 Click 事件 句柄 返回 false 
值 ,将 会 取消 这 个 单 击 动 作 。 
(7) Blur 事件 。Blur 事件 是 在 一 个 表单 中 的 选择 框 , 文 本 输入 框 中 失去 焦点 时 , 即 
在 表单 其 他 区 域 单 击 鼠 标 时 发 生 。 即 使 此 时 当前 对 象 的 值 没有 改变 , 仍 会 触发 onBlur 事 
件 。onBlur 事件 句柄 在 Click 事件 发 生 后 ,由 JavaScript 自动 调用 执行 。 
【 例 5-9】 Blur 事件 示例 。 在 本 例 中 ,需要 用 户 输入 姓名 和 学 号 。 当 用 户 先 输入 姓 
名 ,然后 转换 焦点 到 “学 号 "文本 框 时 ,就 会 判断 “姓名 ”文本 框 中 的 内 容 是 否 为 空 ;如 果 文 
本 框 中 内 容 为 空 就 弹出 消息 框 ,警告 用 户 “ 姓 名 ”不 能 为 空 , 本 例文 件 5-9. html 在 浏览 器 
中 显示 的 效果 如 图 5-15 所 示 。 





























_ EE] 
[Dawebchs\s-9htm PpP-ox| ma 
您 welcome x | 
请 输入 姓名 ， 各 网 页 的 
请 输入 学 号 ， 





下 100%6 ~ 











图 5-15 例 5-9 的 页 面 显示 效果 


代码 如 下 : 


<htm> 
<head> 
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<title> welcome< /title> 
< script language= "JavaScript"> 
finction chk() 
{ var tr window.refom.stu name.value; 
if(th=="™") 
{ alert ("姓名 不 能 为 空 !"); } 
< /script> 
< /head> <body> 
< form name= "reform' method= "post"> 
< 户 请 输入 姓名 : < irput type= "text" name= "stu name" size= "10" cnBlu 一 
"kT></ 
< 户 请 输入 学 号 : < input type= "text" name= "stu no" size= "12">< /bp> 
</form 
< /body> 
< /htm> 
(8) Focus 事件 。 在 一 个 选择 框 \ 文 本 框 或 者 文本 输入 区 域 得 到 焦点 时 发 生 Focus 事 
件 。onFocus 事件 句柄 在 Click 事件 发 生 时 由 JavaScript 自动 调用 执行 。 用户 可 以 通过 
单 击 对 象 ,也 可 通过 键盘 上 的 Tab 键 使 一 个 区 域 得 到 焦点 。 
onFocus 句柄 与 onBlur 句柄 功能 相反 。 


3. 键盘 事件 


在 介绍 键盘 事件 之 前 , 先 来 了 解 JavaScript 解释 器 传 给 键盘 事件 处 理 函 数 Event 对 
象 的 一 些 共同 属 件 。 

(1) type: 是 指 各 自 的 事件 名 称 , 以 字符 串 形 式 表示 。 

(2) layerX,layerY: 是 指 发 生 事件 时 ,光标 相对 于 当前 层 的 水 平和 垂直 位 置 。 

(3) pageX,pageY: 是 指 发 生 事件 时 ,光标 相对 于 当前 网 页 的 水 平和 垂直 位 置 。 

(4) screenX,screenY: 是 指 发 生 事件 时 ,光标 相对 于 屏幕 的 水 平和 垂直 位 置 。 

(5) which: 是 指 键盘 上 按 下 键 的 ASCII 码 值 。 

(6) modifiers: 是 指 键盘 上 随 着 按 下 键 的 同时 可 能 按 下 的 修饰 键 。 

下 面 介 绍 几 个 主要 的 键盘 事件 。 

(1) KeyDown 事件 。 在 键盘 上 按 下 一 个 键 时 ,发 生 KeyDown 事件 。 在 这 个 事件 发 
生 后 ,由 JavaScript 自动 调用 onKeyDown 句柄 。 该 句柄 适用 于 浏览 器 对 象 document 图 
像 . 超 链接 以 及 文本 区 域 。 

(2) KeyPress 事件 。KeyPress 事件 与 KeyDown 事件 类 似 , 当 按键 被 按 下 时 ,将 触发 
KeyPress 事件 , 它 发 生 在 当前 获得 焦点 的 元 素 上 。 与 KeyDown 事件 不 同 的 是 ,每 插入 一 
个 字符 ,就 会 发 生 KeyPress 事件 ;而 KeyDown 事件 总 是 发 生 在 KeyPress 事件 之 前 ,如 
果 这 个 事件 处 理 函 数 返 回 false 值 , 就 不 会 产生 KeyPress 事件 。 

(3) KeyUp 事件 。 在 键盘 上 按 下 一 个 键 ,再 释放 这 个 键 时 发 生 KeyUp 事件 。 在 这 
个 事件 发 生 后 由 JavaScript 自动 调用 onKeyUp 句柄 。 这 个 句柄 适用 于 浏览 器 对 象 
document \ 图像 . 超 链接 以 及 文本 区 域 。 
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(4) Change 事件 。 在 一 个 选择 框 、 文 本 输入 框 或 者 文本 输入 区 域 失去 焦点 ,其 中 的 
值 又 发 生 改变 时 ,就 会 发 生 Change 事件 。 在 Change 事件 发 生 时 ,由 JavaScript 自动 调用 
onChange 句柄 。Change 事件 是 个 非常 有 用 


的 事件 , 它 的 典型 应 用 是 验证 一 个 输入 的 [2 
数据 o 看 Di\web\ch5\5-10.html x 

【 例 5-10】 本 例 中 ,可 在 下 拉 框 中 选择 | 请 选择 您 的 职业 
身份 ,只 要 改变 了 选择 ,JavaScript 可 以 截取 
这 个 改变 ,并 调用 函数 ,给 出 用 户 需要 的 信 
息 ,本 例文 件 5-10. html 在 浏览 器 中 显示 的 效 
果 如 图 5-16 所 示 。 

代码 如 下 : 


<html> 
<head> 
< script language= "JavaScript"> 
function gosite (oneform) 
有 
cneform.stposijiticn.value= oneform.site.cptions.value7 
} 
< /script> 
< /head> 
<body> 
< form name= "myfom"> 
< 户 请 选择 您 的 职业 < /p> 
< select name= "site" onchange= "gosite (document .myfom) "> 
< cption value= "一 楼 一 区 吃 学 生 
<coption value= "一 楼 二 区 "> 职员 
<ocption value= "二 楼 一 区 吃 工 人 
<ocption value= "二 楼 三 区 吃 军 人 
</select> 
发 放 资料 地 点 在 < input type= "text" name= "stposition" value=" 一 楼 一 区 "> 
</form 
< /body> 
< /hm> 





























图 5-16 例 5-10 的 页 面 显示 效果 


(5) Select 事件 。 选 定 文本 输入 框 或 文本 输入 区 域 的 一 段 文本 后 ,发 生 Select 事件 。 
在 Select 事件 发 生 后 ,由 JavaScript 自动 调用 onSelect 句柄 。onSelect 句柄 适用 于 文本 
输入 框 以 及 文本 输入 区 。 

(6) Move 事件 。 在 用 户 或 标本 程序 移动 一 个 窗口 或 者 一 个 帧 时 ,发 生 Move 事件 。 
在 这 个 事件 发 生 后 ,由 JavaScript 自动 调用 onMove 句柄 。 该 事件 适用 于 窗口 以 及 帧 。 

(7) Resize 事件 。 在 用 户 或 者 脚本 程序 移动 窗口 或 帧 时 发 生 Resize 事件 。 在 事件 发 
生 后 由 JavaScript 自动 调用 onResize 句柄 。 该 事件 适用 于 浏览 器 对 象 document 以 
及 帧 。 
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5.7.3 错误 处 理 


在 JavaScript 中 提供 了 脚本 执行 期 间 处 理 错 误 的 功能 。 用 户 一 般 可 以 使 用 Error 事 
件 来 处 理 与 装 入 图 形 和 文档 相关 联 的 错误 ,以 及 处 理 运 行 的 错误 。 


1. Error 事件 


在 JavaScript 中 ,通过 使 用 onError 句柄 处 理 属 性 可 以 指定 出 错时 的 错误 处 理 函 数 。 
对 于 一 般 的 图 像 装载 错误 ,可 与 指定 其 他 事件 处 理 函 数 一 样 简单 指定 。 如 果 onError 句 
柄 绑 定 到 window 对 象 , 则 事件 处 理 函 数 可 以 使 用 以 下 3 个 参数 。 
(1) sMsg: 表示 所 发 生 的 错误 描述 。 
(2) SURL: 表示 发 生 错误 页 面 的 URL。 
(3) sLine: 表示 发 生 错 误 的 行 号 。 
利用 这 些 参 数 可 向 用 户 提供 有 关 的 错误 信息 。 
onError 事件 处 理 函 数 的 返回 值 确定 是 否 向 用 户 显 示 标 准 错 误 信 息 ( 返 回 true 时 不 
提示 ,返回 false 时 显示 )。 
下 例 演示 当 装载 图 像 出 错时 的 处 理 , 代 码 如 下 : 
<html> 
<head><title> 出 错 处 理 < /title> 
< script language= "JavaScript"> 
fimction doerror () 
alert(" 图 像 装 载 错误 !"); 
} 
< /script> 
< /head> 
<body> 
< img src= "shengtang.gif" onerror= "doerror () "> 
< /pody> 
< /htm> 
当 打 开 网 页 时 ,img 标记 符 的 src 属性 是 一 个 不 存在 的 图 像 。 因 此 当 装 载 图 像 出 错 
时 ,调用 出 错 函 数 显示 ”图 像 装 载 错误 !" 提 示 框 。 
2. 错误 处 理 语 句 
1) throw 语句 
throw 语句 用 于 扔 出 异常 ,其 语法 格式 如 下 : 
throw expressicn; 
其 中 ,expression 表达 式 的 值 表示 发 生 错误 类 型 ,通常 应 使 用 比较 容易 理解 和 调试 的 


语句 。 例 如 : 
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throw 叭 载 错误 "; 


2) try 和 catch 语句 
try 和 catch 语句 需要 结合 使 用 ,一 起 支持 异常 处 理 的 过 程 ,其 语法 格式 如 下 : 


statementsy // 处 理 异 常 


如 果 在 处 理 try 语句 中 所 包含 的 语句 时 发 生 异 常 , 则 控制 立即 转 入 catch 语句 所 包含 
的 语句 ,并 将 出 错 信息 保存 在 exception 中 ;如 果 处 理 try 语句 所 包含 语句 时 没有 发 生 异 
常 , 则 跳 过 catch 语句 ,控制 转 入 catch 语句 后 面 的 语句 。 


5.7.4 表单 对 象 与 交互 性 


form 对 象 ( 称 表 单 对 象 或 窗 体 对 象 ) 提供 一 个 让 客户 端 输入 文字 或 选择 的 功能 , 例 
如 , 单 选 按钮 、 复 选 框 .选择 列表 等 ,由 过 form 二 标记 组 构成 ,JavaScript 自动 为 每 一 个 表 
单 建立 一 个 表单 对 象 ,并 可 以 将 用 户 提 供 的 信息 送 至 服务 器 进行 处 理 , 也 可 以 在 
JavaScript 脚本 中 编写 程序 对 数据 进行 处 理 。 

表单 中 的 基本 元 素 ( 子 对 象 ) 有 按钮 单 选 按钮 、 复 选 按 钮 、 提 交 按 钮 . 重 置 按钮 .文本 
框 等 。 在 JavaScript 中 要 访问 这 些 基 本 元 素 ,必须 通过 对 应 特定 的 表单 元 素 的 表单 元 素 
名 来 实现 。 每 一 个 元 素 主 要 是 通过 该 元 素 的 属性 或 方法 来 引用 。 

调用 form 对 象 的 一 般 格式 如 下 : 


< fom name= "表单 名 " action= "URL" ..> 
<input type= " 表 项 类 型 " name=" 束 项 名 " value= 品 省 值 "事件 = 咏 法 函数 "..> 


< /fom> 
1.Text( 单 行 单列 输入 元 素 ) 


功能 : 对 Text 标识 中 的 元 素 实施 有 效 的 控制 。 

属性 : 

name 设 定 提交 信息 时 的 信息 名 称 。 

value 用 于 设 定 出 现在 窗口 中 对 应 HTML 文档 中 value 的 信息 。 
defaultvalue 包括 Text 元 素 的 默认 值 。 

方法 : 

blur() 将 当前 焦点 移 到 后 台 。 

select() 加 亮 文 字 。 
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事件 : 

onFocus 当 Text 获得 焦点 时 ,产生 该 事件 。 
onBlur ” 当 元 素 失 去 焦点 时 ,产生 该 事件 。 
onSelect ” 当 文 字 被 加 亮 显 示 后 ,产生 该 事件 。 
onChange 当 Text 元 素 值 改变 时 ,产生 该 事件 。 


2. Textarea( 多 行 多 列 输入 元 素 ) 


功能 : 对 Textarea 中 的 元 素 进行 控制 。 

属性 : 

name ” 设 定 提交 信息 时 的 信息 名 称 。 

value 设 定 出 现在 窗口 中 对 应 HTML 文档 中 value 的 信息 。 
defaultvalue 元 素 的 默认 值 。 

方法 : 

blur() 将 输入 焦点 失去 。 

select() 加 亮 文字 。 


事件 ， 
onBlur 当 失 去 输入 焦点 后 ,产生 该 事件 。 
onFocus ” 当 输 入 获得 焦点 后 ,产生 该 事件 。 


onChange ” 当 文 字 值 改变 时 ,产生 该 事件 。 
onSelect ”加 亮 文 字 , 产 生 该 事件 。 


3. Select( 选 择 元 素 ) 


功能 : 实施 对 滚动 选择 元 素 的 控制 。 

属性 : 

name 设 定 提交 信息 时 的 信息 名 称 。 

value 用 于 设 定 出 现在 窗口 中 对 应 HTML 文档 中 value 的 信息 。 
length 对 应 HTML 文档 Select 中 的 length。 

options 组 成 多 个 选项 的 数组 。 

selectIndex 指明 一 个 选项 。 

text 选项 对 应 的 文字 。 

selected 指明 当前 选项 是 否 被 选中 。 

index 指明 当前 选项 的 位 置 。 

defaultSelected 默认 选项 。 

事件 : 

onBlur 当 select 选项 失去 焦点 时 ,产生 该 事件 。 

onFocas ” 当 select 选项 获得 焦点 时 ,产生 该 事件 。 

onChange 选项 状态 改变 后 ,产生 该 事件 。 

下 面 程序 把 在 列表 框 中 选 定 的 内 容 在 信息 框 中 显示 ,代码 如 下 : 


< body> 
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< form name= "myEorm> 
< select name= "mySelect"> 
<option value= " 钊 一 个 选择 "> 1< /cption> 
<option value= "第 二 个 选择 必 2< /option> 
<cption value= " 蔬 三 个 选择 省 3c /aption> 
< /select> 
< /fom> 
<a href= 哇 " onclick= "window-alert (document .myForm.mySelect.value);"> 请 选 
择 列 表 < /a> 
< /body> 


4. Button( 按 钮 ) 


功能 : 对 Button 的 控制 。 
属性 : 
name 设 定 提交 信息 时 的 信息 名 称 。 
value ” 设 定 出 现在 窗口 中 对 应 HTML 文档 中 value 的 信息 。 
方法 : 
click() ”该 方法 类 似 于 单 击 一 个 按钮 。 
事件 : 
onClick ” 当 单 击 Button( 按 钮 ) 时 ,产生 该 事件 。 
下 例 演示 一 个 单 击 按钮 的 事件 ,代码 如 下 : 
<body> 
< form name= "myFomm" action= "target.html"> 
<input type= "putton" value= " 哗 击 我 " aoclide "window.alert ("你 单 击 了 我 .');"> 
< /for> 
< /body> 
【 例 5-11】 本 例 中 , 窗 体 myForm 包含 一 个 Text 对 象 和 一 个 按钮 。 当 用 户 单 击 按 
钮 buttonl 时 , 窗 体 的 名 字 就 将 赋 给 Text 对 象 ; 当 用 户 单 击 按钮 button2 时 ,函数 
showElements 将 显示 一 个 警告 对 话 框 , 里 面包 含 窗 体 myForm 上 的 每 个 元 素 的 名 称 。 本 
例文 件 5-11. html 在 浏览 器 中 显示 的 效果 如 图 5-17 和 图 5-18 所 示 。 


人 DAweb\ch5\5-11.html p-ox ee 
感 pswebvch5\5-1Lhtml x 
窗 体 名 称 ， ayform 


] 






































到 100%6 = 
图 5-17 单 击 按钮 buttonl 的 显示 结果 
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ty GD) 全 |) Dxweb\chs\5-11.html PpP-ex| 介 站 各 
您 DAweb\ch5\5-11Lhtml x 


窗 体 名 称 ， myfors 
ETT 
































瘟 体 myform 的 元 素 包括 : 
textl 

button1 

button2 











中 100% ~ 





图 5-18 单 击 按钮 button2 的 显示 结果 


代码 如 下 : 


<html> 
<head> 
< script language= "JavaScript"> 
fancticn showelements (theForm) { 
str= " 啊 体 "+ theFom.namer " 的 元 素 包 括 : \n"; 
for (i=0; i< theForm.length; i++) 
str+ = theForm.elements[i] .namer "\n"; 
alert (str); 
} 
< /script> 
< /head> 
<body> 
< form name= "myfom"> 
窗 体 名 称 : < input type= "text" name= "text1"> 
< 
< input name= "buttonl" type= "button" value= "显示 窗 体 名 称 " 
onclick= "this.formtextl.value= this.fom.name"> 
< input name= "button2" type= "button" value= "显示 窗 体 元 素 " 
onclick= "showelements (this.fom) "> 
</form 
< [body> 
< /htm> 


5. checkbox( 检 查 框 ) 


功能 : 实施 对 一 个 具有 复 选 框 的 元 素 的 控制 。 
属性 : 
name 设 定 提交 信息 时 的 信息 名 称 。 
value 用 于 设 定 出 现在 窗口 中 对 应 HTML 文档 中 value 的 信息 。 
checked 该 属性 指明 框 的 状态 true/false。 
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defaultchecked 默认 状态 。 


方法 : 
click() 使 框 的 某 一 个 项 被 选中 。 
事件 : 


onClick ” 当 框 被 选中 时 ,产生 该 事件 。 
下 面 程序 中 , 单 击 链接 ,将 显示 是 否 选 中 复 选 框 的 提示 ,代码 如 下 : 
<body> 
< form name= "myFom"> 
< jnput type= "heckbox" name= "myCheck" value= "My Check Box"> Check Me 
< /fom> 
<a href="#" onClick= "window.alert (dpcument.myForm.myCheck.checked ? 
'Yes': 'No');"™> 
mm I Checked?< /a> 
< /body> 


6. Password( 口 令 ) 


功能 : 对 具有 口令 输入 的 元 素 的 控制 。 

属性 : 

name 设 定 提交 信息 时 的 信息 名 称 。 

value 设 定 出 现在 窗口 中 对 应 HTML 文档 中 value 的 信息 。 
defaultValue 默认 值 。 

方法 : 

select() 加 亮 输入 口令 域 。 

blur() 失去 password 输入 焦点 。 

focus() 获得 password 输入 焦点 。 


7. Submit( 提 交 元 素 ) 

功能 : 对 一 个 具有 提交 功能 按钮 的 控制 。 

属性 : 

name 设 定 提交 信息 时 的 信息 名 称 。 

value 用 于 设 定 出 现在 窗口 中 对 应 HTML 文档 中 value 的 信息 。 


方法 : 
click() 相当 于 单 击 submit 按钮 。 
事件 : 


onClick ” 当 单 击 该 按钮 时 ,产生 该 事件 。 
5.7.5 ”案例 一 一 使 用 form 对 象 实现 Web 页 面 信息 交互 


下 面 举例 说 明 在 JavaScript 程序 中 如 何 使 用 form 对 象 实现 Web 页 面 信息 交互 。 
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【 例 5-12】 使 用 form 对 象 实现 Web 页 面 信息 交互 ,要求 浏览 者 输入 姓名 并 接受 商 
城 协 议 。 当 不 输入 姓名 并 且 示 接受 协议 时 , 单 击 “ 提 交 ” 按 钮 会 弹出 警告 框 ,提示 用 户 输入 
姓名 并 且 接 受 协 议 ; 当 用 户 输入 姓名 并 且 接 受 协 议 时 , 单 击 “ 复 位 ”按钮 会 弹出 确认 框 ,等 
待 用 户 确 认 是 否 清除 输入 的 信息 。 本 例文 件 5-12. html 在 浏览 器 中 显示 的 效果 如 图 5-19 
所 示 。 






























































| | | 蕊 二 
SA DI DAweb\ch5\5-12.html Prox| 人 nw \ A lS ) 司 DAweb\ch5\5-12.html Pr-Oox| 从 字 加 
关 使 用 form 对 象 实现 Web 页 .x 关 二 用 form 对 象 实现 Web 页 ，x 

请 输入 姓名 请 输入 姓名 王 小 庆 

接受 商城 协议 目 接受 商城 协议 加 











戈 100%6 ~ 











图 5-19 使 用 form 对 象 实现 Web 页 面 信息 交互 
代码 如 下 : 


<html> 
<head> 
<title> 使 用 fom 对 象 实现 wb 页 面 信息 交互 < /title> 
< Script> 
finction check(){ 
if (window. document. formml .namel .value. length= = 0&&window.document.forml.agree.checked= = 


false) 
alert ("姓名 不 能 为 空 且 必须 接受 协议 1"); 
retum true; 


} 
function set() { 
if(confim(" 真 的 清除 吗 ?")) // 在 弹出 的 确认 框 中 如 果 用 户 选 择 “ 确 定 ” 
retum true; 1/ 函数 返回 真 
else 
retum false; 
} 
< /script> 
< [head> 
< body> 
< fom name= "forml" action= "" method "post" onstiomit= "check()" onreset— 
"set()™> 
请 输入 姓名 < input type= "text" name= "namel" size= "16"> <br> 
接受 商城 协议 < input type= "checkbox" name= "agree"> <br> 
< input type= "submit" value= 虽 交 "> 
<input type= "Teset" value= "复位 
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< /fomr> 
< /oody> 
< /htm> 


【说 明 】 在 JavaScript 程序 中 使 用 form 对 象 ,可 以 实现 更 为 复杂 的 Web 页 面 信息 
交互 过 程 。 但 前 提 是 这 些 交互 过 程 只 在 Web 页 面 内 进行 ,不 需要 占用 服务 器 资源 。 


习 是 


1. 编写 程序 实现 按时 间 随 机 变化 的 网 页 背景 ,如 图 5-20 所 示 。 


目 ] pwebveh5\ 习 时 vt5-lhtml 




















图 5-20 题 1 图 


2. 使 用 window 对 象 的 setTimeout() 方 法 和 clearTimeout() 方 法 设计 一 个 简单 的 计 
时 器 。 当 单 击 “开始 计时 ”按钮 后 启动 计时 器 ,文本 框 从 0 开始 进行 计时 ; 单 击 “ 暂 停 计时 ” 
按钮 后 暂停 计时 ,如 图 5-21 所 示 。 


elEx 


和 DAweb\ch5\3 PD- OX 

















| 























图 5-21 题 2 图 


3. 使 用 对 象 的 事件 编程 实现 当 用 户 选 择 下 拉 菜 单 的 颜色 时 ,文本 框 的 字体 颜色 跟随 
改变 ,如 图 5-22 所 示 。 

4. 制作 一 个 禁止 右 击 操作 的 网 页 。 当 浏览 者 在 网 页 上 右 击 时 ,自动 弹出 一 个 警告 对 
话 框 ,禁止 用 户 使 用 右键 快捷 菜单 ,如 图 5-23 所 示 。 

5. 编写 程序 实现 年 月 日 的 联动 功能 , 当 改 变 “ 年 ”月 ”菜单 的 值 时 ,“ 日 ”菜单 的 值 的 
范围 也 会 相应 地 改变 ,如 图 5-24 所 示 。 
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图 5-24 题 5 图 
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在 网 页 中 添加 一 些 适 当 的 网 页 特效 ,使 页 面具 有 动态 效果 ,丰富 页 面 的 观赏 性 与 表现 
力 ,能 吸引 更 多 的 浏览 者 访问 页 面 。JavaScript 技术 可 以 实现 各 种 网 页 特效 ,本 章 将 综合 
之 前 介绍 的 JavaScript 的 基本 知识 ,通过 综合 案例 详解 介绍 JavaScript 各 种 网 页 特效 的 
核心 技巧 和 实现 过 程 。 


61 文字 特效 


使 用 JavaScript 脚本 可 以 制作 各 种 文字 特效 ,通过 这 些 特效 ,可 以 使 页 面 中 的 文字 动 
起 来 。 


6.1.1 打字 效果 


文字 在 页 面 中 逐一 出 现 即 可 形成 打字 效果 ,其 原理 很 简单 ,每 次 多 获取 一 个 待 打 出 的 
字符 串 的 值 ,输出 履 盖 原 来 输出 的 内 容 即 可 。 
【 例 6-1】 制作 宇宙 电子 简介 的 打字 效果 ,页 面 的 显示 效果 如 图 6-1 所 示 。 



















































jC) 8) Oaweb\cho\6-L.htm Pp-ox CES BY) Dweb\choG -Lem p-oxlr 
总 JS 打字 机 效果 x| 嫩 JS 打字 机 效果 x 
字 害 电子 采用 字 窗 电子 采用 标准 化 和 定制 化 服务 相 结 “ 绰 时 
合 的 经 营 模 式 ， 以 高 品质 的 产品 为 立足 
点 ， 为 客户 提供 持续 的 优良 产品 生产 服 
务 和 品质 保证 。 
时 100% ~ 
图 6-1 打字 效果 
代码 如 下 : 
< !aoctype html> 
<html> 
<head> 


<title> JS 打 字 机 效果 < /title> 
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< style type= "text/css"> 


#main { // 打 字 区 域 的 样式 
width: 80%; // 宽 度 为 窗口 的 80% 
height: 750px; 
margin: auto; // 水 平 自动 居中 对 齐 
Padding: 10px; // 内 边 距 10px 
background: #cfelca; 
border: 10px cutset # f9c6aa; // 边 框 宽度 10px 
line— height: 30px; // 行 高 30px 
Color: #9f3c61; 
font— size: 18px; /文字 大 小 18px 

} 
</style> 
< script type= "text/javascript"> 

var typeWriter= { 
msg: function (msg) { 
retburn msg; // 获 取 打 字 的 内 容 


hb 
len: finction(){ 


retum this.msg.lengthy // 获 取 打 字 内 容 的 长 度 
] 

seq: 0, 

speed: 150, // 打 字 时 间 es) 


type: function(){ 
var _this=this; 
baoment .getElementById ("main") .imnerHIM—= _this.msg.sibstring(0, _this 


-Seg) 7 
if ( this.seq-=_this.len()) { // 如 果 输 出 完毕 
_this.sec= 0; 
clearTimeout (t); // 取 消 计 时 器 
} 
else { // 如 果 没 有 输出 完毕 
_this.seqt +; 1/ 获取 一 个 待 打出 的 字符 串 的 值 
Var t= setTimeout (finction() {_this.type()}, this.speed); 
// 设 置 打 字 的 时 间 间 隔 速度 ) 
} 
} 
} 
window.onloade finction () { // 页 面 加 载 时 自动 调用 获取 文字 内 容 函 数 和 打字 输出 函数 
var msg=" 守 窗 电 子 采 用 标准 化 和 定制 化 服务 相 结 合 …… 此 处 省 略 文 字 )"; 
function getMsg(){ 
retum msg; 
1 
typeWriter .msg= getMsg (msg); 
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<div id "min™ > < /div> 
< /body> 
< /htm> 
【说 明 】 
(1) 函数 getMsg() 用 于 获取 打字 的 内 容 , 函 数 type() 用 于 打印 输出 获取 的 内 容 。 
(2) setTimeout(function(){_this. type()}， this. speed) ;语句 用 于 设置 打印 的 速度 ， 
this. speed 的 值 越 小 则 打印 速度 越 快 。 


6.1.2 文字 胞 楼 滚动 效果 
使 用 JavaScript 脚本 结合 文本 框 实现 文字 慢 慢 向 上 疏 的 效果 ,其 原理 很 简单 ,使 用 表 
格 和 文本 框 构建 一 个 高 楼 的 楼 梯 ,然后 逐 层 向 每 层 的 文本 框 中 显示 要 输出 的 文字 ,实现 文 


字 的 让 楼 深 动 效果 。 
【 例 6-2】 制作 文字 息 楼 深 动 效果 ,页 面 的 显示 效果 如 图 6-2 所 示 。 


他 DAweb\ch@\6-2ht P - OX) Oo 司 DAwebvch66-2ht PD- COX)| 
导 文 并 棋 x 舍 文 了 RE 傍 x| 















































六 | 串 井 | 井中 | 田 | 时 | 届 


惰 | 中 | 可 | 时 | 特 


夸 100% ~ 起 100% ~ 











图 6-2 文字 疏 楼 滚动 效果 
代码 如 下 : 


< !doctype html> 
<html> 
<head> 
<title> 文 字 息 楼 < /title> 
< /head> 
<body> 
< script language= JavaScript> 
msg= "宇宙 电子 节 节 高 升 " // 设 置 文字 内 容 
align= "center"; 1/ 设置 表 格 居中 对 齐 
Speed= 250; // 设 置 文字 息 楼 速度 es) 
Ur true; // 设 置 文字 向 上 扑 动 
spas=" "» 
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for (a=0;a<=12;at+) {spast=" "} 

msg= spast msg+ spas; 

eal(-D); 

stop=msg-length; // 获 取 文 字 长 度 

ocument .write ("< form name= 'form'> < table border=0 cellspacing=0 "+ 
"oellpadding= 0 aligr= "+ alignt > "); 

for (i=1;i<=13;i++) { // 设 置 13 层 楼 梯 
dboment .wite(< tr><tc><irput bpe=t 全 成 六 w 民 柑 + 计 上 只" size 作 0; 
Gocument .write ("< /td>< /tr> "); 

} 

document .write ("< /table> < /form> "); 


function scrollIt() { // 文 字 息 楼 函数 
t+} 
with (document.form { 
if ((j+12)<=stop) { // 示 到达 文字 的 最 后 一 个 字符 


boxl .value=msg.charat (); // 逐 层 向 每 层 的 文本 框 中 显示 要 输出 的 文字 
box2.value=msg-charat (j+ 1); 
box3.value=msg.charat (j+ 2); 
box4.value=msg.charAt (j+ 3); 
box5.value=msg.charAat (j+ 4); 
box6.value=msg.charAat (j+ 5)7 
box7.value=msg.charat (j+ 6)7 
box8 .value=msg.charAt (j+ 7)7 
box9.value=msg.charAat (j+ 8); 
boxl0.value=msg.charat (j+ 9); 
boxll.value=msg.charRt (j+ 10); 
boxl2.value=msg.charat (j+ 11); 
boxl3.value=msg.charAat (+ 12); 


} else { // 到 达 文 字 的 最 后 一 个 字符 
j=0; // 重 新 循环 
} 
} 
SetTimeout ("scrollIt ()", speed) ; // 设 置 文字 爬 楼 的 时 间 间 隔 速度 ) 
} 
scrollIt (); // 调 用 文字 爬 楼 函数 
< /script> 
< /pody> 
< /html> 


62 菜单 与 选项 卡特 效 
菜单 与 选项 卡特 效 是 常见 的 网 页 效果 ,许多 网 站 都 可 以 看 到 这 些 效果 的 应 用 。 
6.2.1 制作 二 级 纵向 列表 模式 的 导航 菜单 


【 例 6-3】 使 用 JavaScript 脚本 制作 二 级 纵向 列表 模式 的 导航 菜单 ,页面 显示 效果 如 
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图 6-3 所 示 。 
年 DAweb\ch@\6-3.ht PD- CxXI 个 DAweb\ch6\6-3ht D- OX 
碟 二 执 准 向 列表 模式 的 导航 茶 … x 碟 = 把 亿 向 列表 模式 的 导航 茶 .… x 
商品 管理 商品 管理 
订单 管理 订单 管理 
保 消 管 理 添加 订单 促请 管理 
系统 设置 合并 订单 系统 设置 商品 团购 
优惠 活动 
file:///D:/web/ch6/6-3.html# 苞 100% ~ file:///D:/web/ch6/6-3.html# 扩 100% ~ 
图 6-3 二 级 纵向 列表 模式 的 导航 菜单 
代码 如 下 : 
< !aqoctype html> 
<head> 


<title> 二 级 纵向 列表 模式 的 导航 菜单 < /title> 


< script type= "text/javascript"> 
startList= function() { 


if (document .allg&docment .getElementById) { 


navRoot= document .getElementById ("nav"); 


// 获 取 页 面 元 素 无 序列 表 nav 


for (i=0; i< navRoot.childNodes.lengthy i++) { 


node= navRoot.childNodes[i]7 
if (node.nodeName== "II") { 
node .ormouseover= function() { 
this.classNamet+ =" over"; 
} 
node .ormouseout= function() { 


// 定 义 一 个 鼠标 经 过 一 级 导航 时 的 类 over 


this.className= this.className.replace (" over", ™); 


} 
站 
} 
} 
window.onload= startList; 
< /script> 
< style type= "text/css"> 
uf 
margin: 07 
pagding: 0; 
list- style: none; 
width: 120px; 
border- bottam: lpx solid #999; 
font- size: ]12px7 
text- align: oanter; 
} 
ut 


// 页 面 加 载 时 调用 函数 


// 外 边 距 为 0px 
// 内 边 距 为 Opx 
// 列 表 无 项 目 符号 


/文字 居中 对 齐 
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position: relative; 

} 

Ji 
position: absolute; 
left: 119px; 
top: 07 
isplay: none; 

} 

这 于 杏 届 
width: 108px; 
display: block; 
text— decoration: none; 
Color: #666666; 
background: # fff7 
Padding: Spx; 
border: lpx solid #ccc; 
border- bottam: Opx; 

} 

uu lia: hover { 
background- color: #69f; 
Color: #fff; 

. 

// 解 决 在 正 下 显示 不 正确 的 问题 

关 htmL ul 1i{ 
float: left; 
height: 1%; 

} 

* hmuliaf 
height: 1%; 

} 

//end 

1i: hover ul, li.over ul { 
display: block; 

} 

< /style> 


< /head> 
< body> 


<u iid "nav> 
<li><a hre 伍 哇 心 商品 管理 < /a> 
<Ul> 


// 相 对 定位 


// 绝 对 定位 


// 快 级 元 素 
// 无 修饰 


<1li><ahre 会 啡 性 添 加 商品 < /a>< /li> 
<li><a hre 伍 叶 吃 商品 分 类 < /a></li> 
<Jli><ahre 会 啡 性 品 牌 管理 < /a>< /li> 
<li><a hre 伍 啡 吃 用 户 评 论 </a>< /li> 


</u> 

</1i> 

<1li><ahre 人 只 喧 订单 管理 < /a> 
<U> 


<li><a hre 伍 嘲 吃 订单 查询 </a></li> 
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<Jli><ahre 全 只 图 添加 订单 < /a>< /li> 
<1li><ahre 伍 叶 吃 合并 订单 </a></li> 
</u> 
</1i> 
<li><ahre 伍 哇 吃 促销 管理 < /a> 
<Ul> 
<]li><a hre 伍 嘲 吃 拍卖 活动 </a></li> 
<li><ahre 伍 哇 吃 商品 团购 </a></li> 
<li><a hre 伍 嘲 吃 优惠 活动 </a></1i> 
</ul> 
</li> 
<li><ahref 伍 嘲 吃 系统 设置 </a>< /li> 
</u> 
< /pody> 
< /htm> 


【说 明 】 在 页 面 的 二 head 记 ... 二 /head 二 之 间 添 加 实现 二 级 导航 菜单 的 JavaScript 
脚本 ,代码 中 需要 指定 鼠标 经 过 一 级 导航 时 的 类 名 over。 


6.2.2 制作 Tab 选项 卡 切 换 效果 


许多 网 站 都 可 以 看 到 Tab 选项 卡 栏目 切换 的 效果 ,实现 的 方式 有 很 多 ,总 的 来 说 原 
理 都 是 一 致 的 ,都 是 通过 鼠标 事件 触发 相应 的 功能 函数 ,实现 相关 栏目 的 切换 。 

【 例 6-4】 制作 宇宙 电子 客服 中 心 页 面 的 栏目 切换 的 效果 ,页 面 的 显示 效果 如 图 6-4 
所 示 。 









































旧 ] DAweb\eh6\6-4.html pcx 风 到 这 司 ] bswebvh6v6-4html PP-cx 风 汪汪 2 
居 简单 二 :实现 网 页 Tab 运 项 x | | 居 简单 洁 : 实 现 网 页 Tab 运 项 .、x 
关于 我 们 。 ”联系 我 们 关于 我 们 。 ”联系 我 们 
尊贵 的 客户 ,您 好 ! 欢迎 进入 字 调 电子 客户 服务 中 心 ! 客服 中 心 通过 字 宙 电子 客服 中 心 
提高 自身 的 品牌 、 形 象 、 员 工 素质 等 综合 服务 水 平 ， 减 少 顾客 消 页 的 地 址 : BX 大 通 
时 间 、 秦 用 、 体 力 和 精力 ， 使 顾客 获得 更 高 的 价值 电话 : 13837860222 


email: jw@163.com 

， 户 对 企业 的 满意 度 ， 提升 企业 的 
品牌 知名 度 和 美 兴 度 ， 提高 顾 安 重复 购买 率 ， 从 而 为 企业 创造 源源 不 
断 的 南 机 。 


销售 中 心 
电话 :13912345678 
emaik kitty@163.com 


市 场 && 广告 部 
电话 : 13712345678 
email: lucy@163.com 














成 100%6 > 戌 100% ~ 


6-4 ”Tab 选项 卡 切换 效果 


代码 如 下 : 


<htm> 
<head> 
<meta charset= "gb2312"> 
<title> 简 单纯 js 实现 网 页 Tab 选 项 卡 切换 效果 < /title> 
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font- size: 14px7 


font- family: "Microsoft YaHei"7 


} 

li{ 
list— style: none; 

} 

#tab{ 
position: relative; 
margin left: 20px; 
margin top: 20px 

} 

#tab .tabList ul li{ 
float: left; 
background: # fefefe; 
border: lpx solid #cccy 
Padqing: Spx 0; 
width: 100px; 
text- align: oenter; 
margin left: — lpx; 
position: relative; 
Cursor: pointer; 

} 

#tab .tabCon{ 
position: absolute; 
lJeft: - lpx; 
top: 32px; 
border: lpx solid # ccc; 
border- top: none; 
width: 450px; 
height: auto; 

} 

#tab .tabCon div{ 
Padding: 10px; 
position: absolute; 
cpacity: 0; 

} 

#tab .tabList 1i.cur{ 
border- bottam: none; 
background: # fff7 


// 页 面 所 有 元 素 的 默认 外 边 距 和 内 边 距 


// 页 面 整体 样式 


// 列 表 和 列表 项 样式 
// 列 表 项 无 符号 

// 选 项 卡 样式 

// 相 对 定位 

// 左 外 边 距 为 20px 
// 上 外 边 距 为 20px 


// 选 项 卡 列表 项 样式 


// 向 左 浮动 


//ipx 浅 灰色 实 线 边框 


// 文 本 水 平 居 中 对 齐 


// 选 项 卡 容器 样式 


// 绝 对 定位 


//ipx 浅 灰色 实 线 边框 


// 高 度 自 适应 


// 非 当前 选项 卡 样式 


// 完 全 透明 ,无 法 看 到 选项 卡 


// 当 前 选项 卡 列 表 样 式 
// 当 前 选项 卡 底部 无 边框 


// 当 前 选项 卡 不 透明 样式 


// 完 全 不 透明 ,能 够 看 到 选项 卡 
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</style> 
< /head> 
<body> 
<div id "tab"> 
<div class= "tabList"> 
<Ul> 
<1li class="cur"> 关 于 我 们 < /1i> 
<1i> 联 系 我 们 < /1i> 
</a> 
</div> 
<div class= "tabCon"> 
<div class= "cur"> 


< 全 尊贵 的 客户 ,您 好 ! 欢迎 进入 宇宙 电子 客户 服务 中 心 ! …… 此 处 省 略 文字 )< /p> 
< 访客 服 中 心 的 核心 价值 ,是 通过 建立 完善 的 客户 服务 体系 ,…… 此 处 省 略 文字 )< /E> 
</div> 
<div> 


<p>< strong> 宇 宙 电 子 客服 中 心 </strong> < /p> 


< 人 地 址 : 开封 市 复兴 大 道 < /p> 
< 户 电 话 : 13837860222< /p> 
<p> email: jw@ 163.cam /p> <br/> 
<E><strong> 销 售 中 心 < /strong>< /p> 
< 户 电 话 : 13912345678< /p> 
<p> email: kitty@ 163.camr /p> <br/> 
<E><strong> 市 场 & 广 告 部 < /strong> < /p> 
< 户 电 话 : 13712345678< /p> 
<p> email: lucy@ 163.comc /p> 
</div> 
</div> 
</div> 
< script> 
window.onload= function() { 
Var oDiv= docment .getElementById ("tab"); 


Var alLi=cDiv.getmerentsBYPONEne ("div") [0] .getElenentsBVPCONEne ("1i"); 
Var acon=cDiv.getElerentsBVIacNEeme ("Giv") [1] .getElement-sByTeoNemre (Giv"); 


Var timer=null; 
for (var i=0; i<oLi.length; i++) { 
oLi[i] .index= i; 
oLi [i] .ormouseover= function() { 
show (this.index); 


} 
finction show(a) { 
ingdex—a; 
Var alpha= 0; 
for (var 于 0; jiKoLi.length; j++) { 
oli[j] .className="™; 
acon[D] -className= "™™"; 
aconD] .style-cpacity- 0; 
acnD].style-filter "alfha (pacity= 0)"; 


// 鼠 标 上 其 停 切换 选项 卡 


// 非 当前 选项 卡 完全 透明 
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} 

oLi [indqex] .className= "Cur™; 
clearInterval (timer); 

timer= setInterval (function() { 


alphat=2; 
alpha> 100 && (alpha= 100); 
aCon[index] .style.cpacity= alpha/100; // 当 前 选项 卡 完全 不 透明 


aCon[index] .style.filter= "alpha (opacity= "+ alphat ")"; 
alpha== 100 && clearInterval (timer); 


} 
} 


< /script> 
< /body> 
</htm> 
【说 明 】 
(1) 实现 选项 卡 切换 效果 的 原理 是 将 当前 选项 卡 的 不 透明 度 样式 设置 为 完全 不 透 
明 ,进而 显示 出 选项 卡 ;将 非 当 前 选项 卡 的 不 透明 度 样 式 设置 为 完全 透明 ,隐藏 非 当 前 选 


项 卡 。 

(2) 本 例 中 共 设 置 了 两 个 选项 卡 ,如 果 用 户 需 要 设置 更 多 的 选项 卡 , 很 容易 实现 ,只 
需要 增加 列表 项 过 li 二 的 定义 即 可 。 

(3) 本 例 采用 的 是 鼠标 悬 停 切换 选项 卡 的 效果 ,如 果 需 要 设置 为 鼠标 单 击 切换 选项 
卡 的 效果 ,只 需要 将 JavaScript 脚本 中 的 onMouseOver 修改 为 onClick 即 可 。 


63 图 片 特 效 


JavaScript 除了 可 以 对 页 面 中 的 文字 进行 特效 处 理 外 ,还 可 以 对 页 面 中 的 图 片 实现 
各 种 特殊 效果 。 
6.3.1 制作 循环 滚动 的 图 文字 幕 
在 网 站 的 首页 经 常 可 以 看 到 循环 滚动 的 图 文 展示 信息 ,引起 浏览 者 的 注意 ,这 种 技术 
是 通过 滚动 字幕 技术 实现 的 。 
1. 字幕 标签 的 语法 
在 网 页 中 ,制作 滚动 字幕 使 用 二 marquee 之 标签 ,其 格式 如 下 : 
<marquee directicn= "left | right| wl| down" behavior= "scrolll side|altemate" 
loop= "i|- 1|infinite" hspace= "mf" Vspace= n" scrollamcunt= "i" scrolldelay= Jj" 
bgcolor= "色彩 " width= "x|2%" height="y"> 流 动 文字 或 (和 ) 图 片 < /marquee> 
字幕 属性 的 含义 如 下 。 
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direction: 设置 字幕 内 容 的 滚动 方向 。 

behavior: 设置 滚动 字幕 内 容 的 运动 方式 。 

loop: 设置 字幕 内 容 滚动 次 数 ,默认 值 为 无 限 。 
hspace: 设置 字幕 水 平方 向 空白 像素 数 。 

vspace: 设置 字幕 垂直 方向 空白 像素 数 。 
scrollamount: 设置 字幕 滚动 的 数量 ,单位 是 像素 。 
scrolldelay: 设置 字幕 滚动 的 延迟 时 间 ,单位 是 毫秒 。 
bgcolor: 设置 字幕 的 背景 颜色 。 

width: 设置 字幕 的 宽度 ,单位 是 像素 。 

height: 设置 字幕 的 高 度 ,单位 是 像素 。 


2. 案例 一 一 循环 滚动 的 图 文字 幕 


【 例 6-5】 制作 循环 滚动 的 宇宙 电子 产品 展示 页 面 , 滚 动 的 图 像 支持 超 链接 ,并 且 鼠 
标 指针 移动 到 图 像 上 时 ,画面 静止 ;鼠标 指针 移出 图 像 后 ,图 像 继 续 滚动 ,页 面 显示 的 效果 


如 图 6-5 所 示 。 


















































智 衣 机 器 
ley//Diweb/ch6/ 克 环 浪 翅 0 本 广 李 芒 /6-S.htmla 100% > 
Pp-cxB0 
工控 面板 
辐 不 100% > 








图 6-5 循环 滚动 的 图 文字 幕 


制作 步骤 如 下 。 





(1) 前 期 准备 。 在 示例 文件 夹 下 创建 图 像 文件 夹 images, 用 来 存放 图 像素 材 。 将 本 
页 面 需 要 使 用 的 图 像素 材 存 放 在 文件 夹 images 下 ,本 实例 中 使 用 的 图 片 素材 大 小 均 为 
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200pxX150px。 
(2) 制作 页 面 。 在 示例 文件 夹 下 新 建 一 个 名 为 6-5. html 的 网 页 ,代码 如 下 : 


<html> 

<head> 
<title> 宇 宙 电 子 产 品 展示 < /title> 

< /head> 

<body> 

<table width= "660" border= "0" align= "center"> 

<tr> 
<td> 

<div id- demp style= "overflow: hidden; width: 660px; color: #ffffff; height: 
180px"> 
< table oellPadding= 0 width= 100%alignr left border=0 cellspace= 0> 
< thody> 


<td id= dempl vAligr= top> 

< table oellSpacing= 1 oellPadding= 1> 

< tbody> 

<tr vAlign= top> 

<td vlign= top noWrap> 
<divalign=right> 
<table ocellSpacing= 0 oellPadding= 0 aligre center border= 0> 
< thody> 
<tr> 
<tdaligr=-middle> 
<table oellgpacing= 0 cellFarting= 0 width= 200 alignr center border= 0> 
< thody> 
<tr> 
<td alignr=middle height= 150> 
<ahref="#" target= blank> 
< img width= 200 height= 150 src= "images/01.jpg" border= 0> 
</a></tdp</tr> 
<tr> 
<td class=navl align=midqle height= 20> 
<a class= arm href- 只 "target=_blank> 智 能 机 器 
</</to</tr>< /thody> < /table>< /td> 
<tq align=rmidale> 
<table cellSpacincF 0 cellPadding= 0 widH 200 aligrr onter border= (> 
< thody> 
<tr> 
<td aligr=middle height= 150> 
<ahref="#" target= blank> 
< img width= 200 height= 150 src= "images/02.jpg" border= 0> 

</a></td>< /tr> 
关外 其 
<td class=navl align-midqle height= 20> 
<a class=apnp hre 伍 嘲 " target=_blank> GPS 导航 
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</< /to </tr>< /thody> < /table>< /td> 

<td aligr-middle> 

< table cellspacing= 0 oellpadding=0 width=200 align= center border—= 0> 

< thody> 

< 

< td align=midale height= 150> 

<ahref="#" target= blank> 

< img width= 200 height= 150 src= "images/03.jpg" border= 0> 

</a></tdp</tr> 

< tr> 

<td class=navl aligr=migdle height= 20> 

<a class=apnP href= 嘎 " target=_blanl> 电 子 摄像 机 

</a>< /to < /tr>< /thody> < /table>< /to> 

<tdaligrmiddle> 

<table cellspacing= 0 oellpadding= 0 widthe= 200 aligrr center border= 0> 

< thody> 

<tr> 

<td aligr=middle height= 150> 

<ahref="#" target= blank> 

< img width= 200 height= 150 src= "images/04.jpg" border= 0> 

</a>< /to < /tr> 

<tr> 

<td class=nav] align=middle height= 20> 

<a class=apm2 hre 全 只 "target=_blanl> 工 控 面 板 
</a></td></tr></tbody>< /table> < /td> 

< /tr>< /thody> < /table> < /div> < /to> < /tr>< /thody> < /table> < /to> 


<!------------------- dem2--------------------- > 
<ta id= demo? width= "0"> 
</td> 
< /tr> < /tbody>< /table> 
</div> 
<!-------------------- dem end- ----------------- > 
< Script> 
var dir=1 // 每 步 移动 像素 ,该 值 越 大 ,字幕 滚动 越 快 
var speed= 20 // 循 环 周期 之 秒 ), 该 值 越 大 ,字幕 滚动 越 慢 
demo2.innerHIML= demol.innerHTML 
function Marquee (){ // 正 常 移动 


if (0 && (emo.offsetWidHh cea.scrollIeft)<=0) demo.scrollIeft=0 
if(dirx 0 && dam.scrmllIeft<=0)) dam.scrollIeft= damc2.cffsetwidth 
Gemp.scrollIeft+=dir 
dem.onmouseover= functicn () {clearInterval MyMar)} // 和 暂停 移动 
demp-cnmpusecut= function () {MyMar= setInterval (Marquee, speed) } // 继 续 移 动 
Var MyMar= setInterval (Marquee, speed) 
< /script> 
</td> 

< /tr> 

< /table> 

< /pody> 
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< /htm> 


【说 明 】 制作 循环 滚动 字幕 的 关键 在 于 字幕 参数 的 设置 ,要 求 如 下 。 

(1) 滚动 字幕 代码 的 第 1 行 定义 的 是 字幕 Div 容器 ,其 宽度 决定 了 字幕 中 能 够 同时 
显示 的 最 多 图 片 个 数 。 例 如 ,本 例 中 每 张 图 片 的 宽度 为 200px, 设 置 字幕 Div 的 宽度 为 
660px。 这 样 , 在 字幕 Div 中 最 多 能 显示 3 个 完整 的 图 片 。 字 幕 所 在 表格 的 宽度 应 当 等 于 
字幕 Div 的 宽度 。 例 如 ,设置 表格 的 宽度 为 660px, 恰 好 等 于 字幕 Div 的 宽度 。 

(2) 字幕 Div 的 高 度 应 当 大 于 图 片 的 高 度 , 这 是 因为 在 图 片 下 方 定 义 的 还 有 超 链 接 
文字 ,而 文字 本 身 也 会 占用 一 定 的 高 度 。 例 如 ,本 例 中 每 个 图 片 的 高 度 为 150px, 设 置 字 
幕 Div 的 高 度 为 180px, 这 样 既 可 以 显示 出 图 片 ,也 可 以 显示 出 链接 文字 。 





6.3.2 制作 幻灯 片 切换 广告 


在 网 站 的 首页 中 经 常 能 够 看 到 幻灯 片 播放 的 广告 , 既 美 化 了 页 面 的 外 观 , 又 可 以 节省 
版 面 的 空间 。 本 小 节 主 要 讲解 如 何 使 用 JavaScript 脚本 制作 幻灯 片 广告 。 

【 例 6-6】 制作 幻灯 片 广告 ,每 隔 一 段 时 间 ,广告 自动 切换 到 下 一 幅 画 面 ; 用 户 单 击 
广告 下 方 的 数字 ,将 直接 切换 到 相应 的 画面 ;用 户 单 击 链接 文字 ,可 以 打开 相应 的 网 页 ( 读 
者 可 以 根据 需要 自己 设置 链接 的 页 面 , 这 里 不 再 制作 该 链接 功能 ), 本 例文 件 6-6. html 在 
浏览 器 中 的 浏览 效果 如 图 6-6 所 示 。 








图 6-6 幻灯 片 广告 


制作 步骤 如 下 。 

(1) 前 期 准备 。 在 栏目 文件 夹 下 创建 图 像 文件 夹 images, 用 来 存放 图 像素 材 。 将 本 
页 面 需要 使 用 的 图 像素 材 存放 在 文件 夹 images 下 ,本 实例 中 使 用 的 图 片 素材 大 小 均 为 
410pxX 200px。 

幻灯 片 切 换 广告 的 特效 需要 使 用 特定 的 Flash 幻灯 片 播放 器 ,本 例 中 使 用 的 幻灯 片 
播放 器 名 为 playswf. swf, 将 其 复制 到 示例 文件 夹 的 根 目录 中 。 

(2) 制作 页 面 。 在 示例 文件 夹 下 新 建 一 个 名 为 6-6. html 的 网 页 ,代码 如 下 : 


< ldoctype html> 
<html> 
<head> 
<title> Flash 幻 灯 片 广告 < /title> 
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< /head> 
<body> 
< div style= "width: 410px;height: 220px;border: lpx solid #000"™> 
< script type= text/javascript> 
和 
jimgUrll= "images/01.jpg"; 
imgtext]=" 曲 院 幽 荷 "; 
imgLinkl= escape (# "); 
imgUrl2- "images/02.jpg"; 
imgtext2= "杨柳 垂 堤 "; 
imgLink2= escape ("#"); 
imgUrl3= "images/03.jpg"; 
imgtext3- "罗阳 断 桥 史 
imgLink3= escape ("# "); 
imgUrl4= "images/04.jpg"; 


imgtext4- "绿绿 竹林 "; 
imgLink4= escape ("# "); 
var focus width= 410 // 图 片 的 宽度 
var focus height= 200 // 图 片 的 高 度 
var text height=20 // 文 字 的 高 度 


var swf height= focus height+ text height // 播 放 器 的 高 度 = 图 片 的 高 度 + 文 字 的 高 度 

var pics= imgUrl1+ "| "+ imgUrl2+ "| "+ imgUrl3+ "| "+ imgUr14 

var links= imgLinkl+ "| "+ imgLink2+ "| "+ imgLink3+ "| "+ imgLink4 

Var texts= imgtext1+ "| "+ imgtext2+ "| "+ imgtext3+ "| "+ imgtext4 

Gocument .write ('< object ID= "focus flash" classid= "clsid: dq27cdb6e- 
ae6d- 1]cf- 96b8- 44553540000" 
codebase= "http: //fpdownload.macroamedia.comV/pub/shockwave/cabs/ 
flash/swflash.cabt version= 6,0,0,0" width= "'+ focus widtht '" 
height= "+ swf_height+ "> '); 

bament .write('< param name= "allowScripthooess" value= ™ in'> 
< param name= "movie" value= "playswf.swf"> < param name= "quality" 
Value= "high"> < param name= "bgcolor" value= "# fff"> '); 

ocument .write ('< param name= "menu" Value= "false"> < param name= wmode 
Value= "opaqgue"> '); 

bament .write('< param namer "ElasHVars" value= "pics= +picst '&links= + 
linkst+ '&texts= '+ texts+ 'gborderwidth= '+ focus width+ ' 
Shorderheight= '+ focus height+ 'gtextheight= '+ text heightr "> '); 

bament. .write ('< erbed ID= "focus flash" src= "playswf.swf" wrode= 
"opagnen" FlastVars= "pics= '+picst '&links= '+ linkst '&texts= '+ textst ' 
&borderwidth= '+ focus widtht 'gborderheight= '+ focus height+" 
&textheight= '+ text height+ '" menu= "false" bgcolor= "Cc5c5c5" 
quality= "high" 
Widthr "+ foous widtht '" height= "+ swf height+ '" allowScripthooess= 
"sameDamain" type= "application/x- shockwave— flash" pluginspage— 
"http://www.macromedia.com/go/getflashplayer" /> "); 

ocument .write ('< /cbject> '); 
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【说 明 】 制作 幻灯 片 切换 效果 的 关键 在 于 播放 器 参数 的 设置 ,要 求 如 下 。 

(1) 播放 器 参数 中 的 focus_width 设置 为 图 片 的 宽度 (410px) ,focus_height 设置 为 
图 片 的 高 度 (200px) ,text_height 设置 为 文字 的 高 度 (20px),pics 用 于 定义 图 片 的 来 源 ， 
links 用 于 定义 链接 文字 的 链接 地 址 ,texts 用 于 定义 链接 文字 的 内 容 。 

(2) 幻灯 片 所 在 Div 容器 的 宽度 应 当 等 于 图 片 的 宽度 ,Div 容器 的 高 度 应 当 等 于 图 片 
的 高 度 十 文字 的 高 度 。 例 如 ,设置 Div 容器 的 宽度 为 410px, 恰 好 等 于 图 片 的 宽度 ;设置 
Div 容器 的 高 度 为 220px, 恰 好 等 于 图 片 的 高 度 (200px) 十 文字 的 高 度 (20px) 。 


习 题 


1. 编写 程序 设置 网 页 字体 的 大 小 ,可 以 分 为 大 .中 小 3 种 模式 显示 ,如 图 6-7 所 示 。 














站 DAwebvch6\ 习 是 vt6-Lhtml 
区 交 闻 休 大 中 小 | 
大 虫 尘 



































宇宙 电子 采用 标准 化 和 定制 化 服务 相 结合 的 经 营 模式 ， 以 高 品质 于 


的 为 立足 点 ， 以 务 于 市 场 为 导向 ， 以 先进 优良 的 自动 技术 服务 于 市 场 为 号 向 ， 以 先进 优良 的 自动 化 生产 和 惠 试 装备 为 保障 ， 以 科 : 学 规 的 
所 让 是 洒 计 和 全 信和 有 夫 的 因 埋 基站 主人 的 员 | 
党 朝气 示 过 的 二 过 奈 员工 团队 为 依托 ， 为 客户 提 从 持续 的 优良 

品 生产 服务 和 品质 保证 。 
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图 6-7 题 1 图 


2. 制作 一 个 循环 切换 画面 的 广告 网 页 。 每 隔 一 段 时 间 ,广告 自 动 切换 到 下 一 幅 画 
面 ;用 户 单 击 广告 右边 的 小 图 ,将 直接 切换 到 相应 的 画面 ,效果 如 图 6-8 所 示 。 


i 














同 页 时效 是 用 程序 代码 在 同 页 中 实现 导 庆 果 或 者 特殊 功 能 的 -各 技术 Ed 








图 6-8 题 2 图 


i172 


第 6 章 ”使 用 Javascrirt 制 作 网 页 特效 
3. 文字 循环 向 上 滚动 , 当 光 标 移动 到 文字 上 时 ,文字 停止 滚动 ;光标 移 开 则 继续 滚 
动 ,如 图 6-9 所 示 。 





[ol© | [oS le 


< | Daweb\ch\ 3 PD - OX 有 Ca 全 DAweb\ch@\3x P - GX) 0 
web I he | 











图 6-9 题 3 图 


4. 编写 程序 在 页 面 中 显示 颜色 变幻 、 逐 字 输 出 的 欢迎 词 , 如 图 6-10 所 示 。 











图 6-10 题 4 图 
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HTML 5 引入 了 多 媒体 ,API\ 数 据 库 支持 等 高 级 应 用 功能 ,允许 更 大 的 灵活 性 ,支持 
开发 非常 精彩 的 交互 式 网 站 。HTML 5 还 提供 了 高 效 的 数据 管理 .绘制 .视频 和 音频 工 
具 ,结合 JavaScript 编程 ,进一步 促进 了 Web 应 用 的 开发 。 


71 HIM 5 拖 放 ARI 


拖 放 是 HTML 5 标准 中 非常 重要 的 部 分 ,通过 拖 放 应 用 程序 编程 接口 (Application 
Programming Interface, APD) 可 以 让 HTML 页 面 中 的 任意 元 素 都 变 成 可 拖 动 的 ,使 用 拖 
放 机 制 可 以 开发 出 更 友好 的 人 机 交互 界面 。 

拖 放 操作 可 以 分 为 两 个 动作 : 在 某 个 元 素 上 按 下 鼠标 移动 鼠标 (没有 松 开 鼠标 ) ,此 
时 开始 拖 动 , 在 拖 动 的 过 程 中 ,只 要 没有 松 开 鼠标 ,将 会 不 断 产 生 事件 ,这 个 过 程 称 为 
“ 拖 ”; 把 被 拖 动 的 元 素 拖 动 到 另外 一 个 元 素 上 并 松 开 鼠标 ,这 个 过 程 被 称 为 “ 放 ”。 


7.1.1 draggable 属性 


draggable 属性 用 来 定义 元 素 是 否 可 以 拖 动 ,该 属性 有 两 个 值 : true 和 false, 默 认为 
false。 当 值 为 true 时 ,表示 元 素 选中 之 后 可 以 进行 拖 动 操作 ,否则 不 能 拖 动 。 

【 例 7-1】 draggable 属性 示例 ,本 例文 件 7-1. html 在 浏览 器 中 的 显示 效果 如 图 7-1 
所 示 。 





e [= En 
E30 | oweb\chn7-Lhtm pr-oxDn ee 
和 全 draggable 层 性 示 便 * | 


元 素 draggable 属 性 















可 以 拖 动 的 文字 





UniDigital 宇宙 电子 








可 以 拖 动 的 图 片 
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图 7-1 例 7-1 的 页 面 显示 效果 
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代码 如 下 : 


< ldoctype html> 


<htm> 


<head> 


<meta charset— "go?312"> 
<title> draggable 属性 示例 < /title> 
< /head> 


<body> 


<hl align= "center"> 元 素 draggable 属 性 < /hl> 

<p draggable= "true> 可 以 拖 动 的 文字 < /p> 

可 以 拖 动 的 图 片 < img src= "images/logo.jpg" border= "1" draggable= "true"> 
< /pody> 


< /htm> 


【说 明 】 draggable 属性 设置 为 true 时 仅仅 表示 当前 元 素 允 许 拖 放 ,但 是 并 不 能 真 
正 实现 拖 放 , 必 须 与 JavaScript 脚本 结合 使 用 才能 实现 该 功能 ,在 接 下 来 的 案例 中 将 会 讲 
解 如 何 实现 这 一 功能 。 


7.1.2 拖 放 触发 的 事件 和 数据 传递 


在 例 7-1 中 ,设置 元 素 的 draggable 属性 为 true 只 是 定义 了 当前 元 素 允 许 拖 放 ,用 户 
看 不 到 拖 放 的 效果 ,并 且 在 拖 放 时 也 不 能 携带 数据 。 因 此 ,使 用 拖 放 时 ,还 需要 通过 
JavaScript 脚本 绑 定 事件 监听 器 ,并 在 事件 监听 器 中 设置 所 需 携 带 的 数据 。 


1. 拖 放 触 发 的 事件 


在 拖 放 过 程 中 ,可 触发 的 事件 见 表 7-1。 


表 7-1 拖 放 时 可 能 触发 的 事件 





























事件 事 件 源 括 述 

ondragstart | 被 拖 动 的 HTML 元 素 开始 拖 动 元 素 时 触发 该 事件 

i 被 皂 动 的 HTML 元素 拖 动 元 素 过 程 中 触发 该 事件 

ondragend 被 拖 动 的 HTML 元 素 拖 动 元 素 结束 时 触发 该 事件 

ondragenter | 抢 动 时 鼠标 所 进入 的 目标 元 素 | 被 扼 动 的 元 素 进入 目标 元 素 的 范围 内 时 航 发 该 事件 

ondragleave | 抢 动 时 鼠标 所 离开 的 元 素 被 拖 动 的 元 素 离 开 当前 元 素 的 范围 内 时 航 发 该 事件 
本 eR 

ondragover | 拖 动 时 鼠标 所 经 过 的 元 素 站 也 经 过 的 天 春 范 转 内 御 动 天 素 时 会 不 断 地 融 改 
该 事件 

oooy ee 被 拖 动 的 元 素 释放 到 当前 元 素 中 时 ,会 触发 该 事件 

2. 数据 传递 


dataTransfer 对 象 用 于 从 被 拖 动 元 素 向 目标 元 素 传递 数据 ,其 中 提供 了 许多 实用 的 
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属性 和 方法 。 例 如 ,通过 dropEffect 与 effectAllowed 属性 相 结合 可 以 自 定义 拖 放 的 效 
果 , 使 用 setData() 和 getData() 方 法 可 以 将 拖 放 元 素 的 数据 传递 给 目标 元 素 。 

















dataTransfer 对 象 的 属性 见 表 7-2。 
表 7-2 dataTransfer 对 象 的 属性 
属 ”性 描 述 
dropEffect 设置 或 返回 允许 的 操作 类 型 ,可 以 是 none ,copy \link 或 move 
mR 设置 或 返 回 被 拖 放 元 素 的 操 作 效 果 类 别 ,可 以 是 none、copy、copyLink、copyMove、 
link linkMove .move all 或 uninitialized 
items 返回 一 个 包含 拖 动 数据 的 dataTransferltemList 对 象 
types 返回 一 个 DOMStringList, 包 括 存 人 dataTransfer 对 象 中 数据 的 所 有 类 型 
files 返回 一 个 拖 动 文件 的 集合 ,如 果 没 有 拖 动 文件 该 属性 为 空 





dataTransfer 对 象 的 方法 见 表 


7-3 。 


表 7-3 dataTransfer 对 象 的 方法 


方 ”法 


描述 





setData(format, data) 


向 dataTransfer 对 象 中 添加 数据 





getData(format) 


从 dataTransfer 对 象 读 取 数据 





clearData(format) 


清除 dataTransfer 对 象 中 指定 格式 的 数据 





setDragImage(icon, x,y) 





设置 拖 放 过 程 中 的 图 标 , 参 数 x、y 表示 图 标的 相对 坐标 


在 dataTransfer 对 象 所 提供 的 方法 中 ,参数 format 用 于 表示 在 读 取 、 添 加 或 清空 数 
据 时 的 数据 格式 ,该 格式 包括 text/plain( 文 本 文字 格式 ) .text/html(HTML 页 面 代 码 格 
式 ) .text/xml(XML 字符 格式 ) 和 text/url-list(URL 格式 列表 ) 。 
需要 注意 的 是 ,IE 浏览 器 并 不 完全 支持 text/plain .text/html text/xml 和 text/url- 


list 格式 ,可 以 通过 text 简写 方式 进行 兼容 。 


【 例 7-2〗 HTML 5 拖 放 示 例 , 用 户 可 以 拖 动 页 面 中 的 图 片 放置 到 目标 矩形 中 ,本 例 
文件 7-2. html 在 浏览 器 中 的 显示 效果 如 图 7-2 所 示 。 











p-ox) ee 








| pwebwhry-zhml 
总 HTML 5 直人 x 























Wweb\ch7\7-2htrrl Ld 








管 HIM 





请 把 宇 定 电 子 网 站 的 标志 医 片 拖 放 到 矩形 中 : 


UniDig 攻 al 宇宙 电子 


请 把 宇 害 电 子 网 站 的 标志 图 片 拖 放 到 和 矩 形 中 : 


UniDigiMal 宇宙 电子 











及 100x ~ 








图 7-2 例 7-2 的 页 面 显示 效果 
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代码 如 下 : 


< !Goctype html> 
<htm> 
<head> 
<meta charset= "gb2312"> 
<title> HML 5 拖 放 示例 < /title> 
< style type= "text/css"> 
#divi{ // 目 标 矩 形 的 样式 
width: S500px; 
height: 80px; 
Paoding: 10px; 
border: lpx solid # aaaaaa; // 边 框 为 1px 浅 灰色 实 线 边框 
} 
</style> 
< Script type= "text/javascript"> 
function allowDrop (ev) { 
ev.preventDefault (); // 设 置 允 许 将 元 素 放 置 到 其 他 元 素 中 
} 
finction drag (ev) { 
ev.dataTransfer.setData ("Text",ev.target .id); 


// 设 置 被 拖 动 元 素 的 数据 类 型 和 值 
} 
function drop (ev){ // 当 放置 被 拖 动 元 素 时 发 生 drop 事 件 
ev.preventDefault (); // 设 置 允 许 将 元 素 放置 到 其 他 元 素 中 


Var data= ev.dataTransfer.getData ("Text"); 
// 从 dataTransfer 对 象 读 取 被 拖 动 元 素 的 数据 
ev.target.appendchild (docment .getElementById (data) ); 
} 
< /script> 
< /head> 
<body> 
< 户 请 把 宇宙 电子 网 站 的 标志 图 片 拖 放 到 算 形 中 : < /p> 
<div id "divl" ondrop= "drop (event)" ondragover= "allowDrop (event) "> 
</div> 
<br /> 
< img id= "dragl" src= "images/1ogo.jpg" draggable= "true" ondragstart= 
"drag (event)" /> 
< /body> 
< /html> 


【说 明 】 

(1) 开始 拖 动 元 素 时 触发 ondragstart 事件 ,在 事件 的 代码 中 使 用 dataTransfer. 
setData() 方 法 设置 被 拖 动 元 素 的 数据 类 型 和 值 。 本 例 中 ,被 拖 动 元 素 的 数据 类 型 是 
"Text" , 值 是 被 拖 动 元 素 的 id( 即 "dragl") 。 

(2) ondragover 事件 规定 放置 被 拖 动 元 素 的 位 置 , 默 认为 无 法 将 元 素 放置 到 其 他 元 
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素 中 。 如 果 需 要 设置 允许 放置 ,必须 阻止 对 元 素 的 默认 处 理 方 式 , 需 要 通过 调用 
ondragover 事件 的 event. preventDefault() 方 法 来 实现 这 一 功能 。 

(3) 当 放置 被 拖 动 元 素 时 将 触发 drop 事件 。 本 例 中 ,div 元 素 的 ondrop 属性 调用 了 
一 个 函数 drop(event) 来 实现 放置 被 拖 动 元 素 的 功能 。 


72 多 媒体 播放 





在 HTML 5 出 现 之 前 并 没有 将 视频 和 音频 嵌入 页 面 的 标准 方式 ,多 媒体 内 容 在 大 多 
数 情况 下 都 是 通过 第 三 方 插件 或 集成 在 Web 浏览 器 的 应 用 程序 置 于 页 面 中 。 通 过 这 样 
的 方式 实现 的 音 视 频 功能 ,需要 借助 第 三 方 插件 ,并 且 实 现代 码 复杂 元 长 。 由 于 这 些 插件 
不 是 浏览 器 自身 提供 的 ,往往 需要 手动 安装 ,不 仅 烦 琐 而 且 容易 导致 浏览 器 骨 溃 。 运 用 
HTML 5 中 新 增 的 忆 video> 标 签 和 一 audio> 标 签 可 以 避免 这 样 的 问题 。 


7.2.1 HTML 5 的 多 媒体 支持 


HTML 5 中 提供 了 去 video 之 和 所 audio 二 标签 ,可 以 直接 在 浏览 器 中 播放 视频 和 音 
频 文件 ,无 须 事先 在 浏览 器 上 安装 任何 插件 ,只 要 浏览 器 本 身 支持 HTML 5 规范 即 可 。 
目前 各 种 主流 浏览 器 如 IE 9 十 、Firefox、Opera、Safari 和 Chrome 等 浏览 器 都 支持 使 用 
所 video 二 和 二 audio> 标 签 来 播放 视频 和 音频 。 

HTML 5 对 原生 音频 和 视频 的 支持 潜力 巨大 ,但 由 于 音频 、 视 频 的 格式 众多 ,以 及 相 
关 厂 商 的 专利 限制 ,导致 各 浏览 器 厂商 无 法 自由 使 用 这 些 音频 和 视频 的 解码 器 ,浏览 器 能 
够 支持 的 音频 和 视频 格式 相对 有 限 。 如 果 用 户 需要 在 网 页 中 使 用 HTML 5 的 音频 和 视 
频 ,就 必须 熟悉 下 面 列举 的 音频 和 视频 格式 。 音 频 格 式 有 Ogg Vorbis、MP3、WAV。 视 
频 格式 有 Ogg、H. 264(MP4)、WebM。 


1. 音频 格式 


(1) Ogg Vorbis。Ogg Vorbis 是 一 种 新 的 音频 压缩 格式 ,类似 于 MP3 等 现 有 的 音乐 
格式 。 它 是 完全 免费 .开放 和 没有 专利 限制 的 。Ogg Vorbis 有 一 个 很 出 众 的 特点 ,就 是 
支持 多 声 道 。Ogg Vorbis 文件 的 扩展 名 是 . Ogg, 这 种 文件 的 设计 格式 非常 先进 ,目前 创 
建 的 Ogg 文件 可 以 在 未 来 的 任何 播放 器 上 播放 。 因 此 ,这 种 文件 格式 可 以 不 断 地 进行 大 
小 和 音质 的 改良 ,而 不 影响 旧 有 的 编码 器 或 播放 器 。 

(2) MP3。MP3 格式 诞生 于 20 世纪 80 年 代 的 德国 。MP3 是 指 MPEG 标准 中 的 音 
频 部 分 ,也 就 是 MPEG 音频 层 。MPEG 音频 文件 的 压缩 是 一 种 有 损 压 缩 ,通过 牺牲 声音 
文件 中 12 一 16kHz 的 高 音频 部 分 的 质量 来 压缩 文件 的 大 小 。 相 同时 间 长 度 的 音乐 文件 ， 
用 MP3 格式 存储 ,一 般 只 有 WAYV 文件 的 1/10, 而 音质 也 次 于 CD 格式 或 WAYV 格式 的 
声音 文件 。 
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(3) WAV。WAYV 格式 是 Microsoft 公司 开发 的 一 种 声音 文件 格式 ,用 于 保存 
Windows 平台 的 音频 信息 资源 ,被 Windows 平 台 及 其 应 用 程序 所 支持 ,支持 多 种 音频 位 
数 、 采 样 频 率 和 声 道 , 是 目前 PC 上 广 为 流 行 的 声音 文件 格式 。 几 乎 所 有 的 音频 编辑 软件 
都 识别 WAV 格式 。 


2. 视频 格式 


(1) Ogg。Ogg 也 是 HTML 5 所 使 用 的 视频 格式 之 一 。Ogg 采用 多 通道 编码 技术 ， 
可 以 在 保持 编码 器 灵活 性 的 同时 而 不 损害 原本 的 立体 声 空间 影像 ,而 且 实 现 的 复杂 程度 
比 传统 的 联合 立体 声 方式 要 低 。 

(2) H.264(MP4)。MP4 的 全 称 是 MPEG-4 Part 14 ,是 一 种 储存 数字 音频 和 数字 视 
频 的 多 媒体 文件 格式 ,文件 扩展 名 为 . mp4。MP4 封装 格式 是 基于 QuickTime 容器 格式 
定义 ,媒体 描述 与 媒体 数据 分 开 , 目 前 被 广泛 应 用 于 封装 H. 264 视频 和 ACC 音频 ,是 高 
清 视频 的 代表 。 

(3) WebM。WebM 由 Google 提出 ,是 一 个 开放 、 免 费 的 媒体 文件 格式 。WebM 影 
片 格式 是 以 Matroska( 即 MKV) 容 器 格式 为 基础 开发 的 新 容器 格式 ,包括 VP8 影片 轨 和 
Ogg Vorbis 音 轨 。WebM 标准 的 网 络 视频 更 加 偏向 于 开源 并 且 是 基于 HTML 5 标准 
的 ,WebM 项 目 旨 在 为 对 每 个 人 都 开放 的 网 络 开发 高 质量 .开放 的 视频 格式 ,其 重点 是 解 
决 视频 服务 这 一 核心 的 网 络 用 户 体验 。 


7.2.2 音频 标签 


目前 ,大 多 数 音频 是 通过 插件 (比如 Flash) 来 播放 的 。 然 而 ,并 非 所 有 浏览 器 都 拥有 
同样 的 插件 。HTML 5 规定 了 一 种 通过 音频 标签 二 audio 二 来 包含 音频 的 标准 方法 ， 
二 audio 二 标签 能 够 播放 声音 文件 或 者 音频 流 。 
1. 过 audio 之 标签 支持 的 音频 格式 及 浏览 器 兼容 性 
过 audio> 标 签 支持 3 种 音频 格式 ,在 不 同 的 浏览 器 中 的 兼容 性 见 表 7-4。 
表 7-4 3 种 音频 格式 的 浏览 器 兼容 性 











音频 格式 IE 9 十 Firefox Opera Chrome Safari 
Ogg Vorbis J Vv ol 

MP3 Vv V NA 
WAV NA NN/ Vv 

















2. 二 audio 之 标签 的 属性 


二 audio 二 标签 的 属性 见 表 7-5 。 
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表 7-5 过 audio 之 标签 的 属性 




















属 性 描 述 

autoplay 如 果 出 现 该 属性 , 则 音频 在 就 绪 后 马上 播放 
controls 如 果 出 现 该 属性 , 则 向 用 户 显示 控件 ,比如 播放 、 和 暂停 和 音量 控件 
loop 如 果 出 现 该 属性 , 则 每 当 音频 结束 时 重新 开始 播放 
preload 如 果 出 现 该 属性 , 则 音频 在 页 面 加 载 时 进行 加 载 ,并 预备 播放 
src 要 播放 音频 的 URL 


为 了 解决 浏览 器 对 音频 和 视频 格式 的 支持 ,使 用 二 source 之 标签 为 音频 或 视频 指定 
多 个 媒体 源 ,浏览 器 可 以 选择 适合 自己 播放 的 媒体 源 。 

【 例 7-3】〗 使 用 二 audio 之 标签 播放 音频 ,本 例文 件 7-3. html 在 浏览 器 中 的 显示 效果 
如 图 7-3 所 示 。 























S] 站 DAweb\ch7\7-3.html 
合 谋 渗 标 答 audio 示 例 x 


播放 音频 











1 0:00:25 mm em :03:55 = 叶 ) 





图 7-3 例 7-3 的 页 面 显示 效果 
代码 如 下 : 


< !goctype html> 
<html> 
<head> 
<meta charset= "gb2312"> 
<title> 音 频 标签 aadio 示 例 < /title> 
< /head> 
<body> 
<h3> 播 放 音频 < /h3> 
< audio controls= "controls" autoplay= "autoplay"> 
< source src= "audio/song.mp3" type= "audio/mpeg" /> 
< source src= "audio/song.ogg" type= "audio/ogg" /> 
< Source src= "audio/song.wav" type= "audio/x- wav" /> 
您 的 浏览 器 不 支持 音频 标签 
< /audio> 
< /pody> 
</htm> 


【说 明 】 

(1) 二 audio> 与 到 /audio 之 标签 之 间 插 入 的 内 容 是 提供 不 支持 二 audio 之 标签 的 浏 
览 器 显示 的 。 

(2) 二 audio 二 标签 允许 包含 多 个 二 source 记 标签 。 二 source 二 标签 可 以 链接 不 同 的 
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音频 文件 ,浏览 器 将 使 用 第 一 个 可 识别 的 格式 。 
7.2.3 视频 标签 


对 于 视频 来 说 ,大 多 数 视频 也 是 通过 插件 (比如 Flash) 来 显示 的 。 然 而 ,并 非 所 有 浏 
览 器 都 拥有 同样 的 插件 。HTML 5 规定 了 一 种 通过 视频 标签 二 video 二 来 包含 视频 的 标 
准 方法 。 二 video 二 标签 能 够 播放 视频 文件 或 者 视频 流 。 


1. 达 video 之 标签 支持 的 视频 格式 及 浏览 器 兼容 性 


去 video> 标 签 支持 3 种 视频 格式 ,在 不 同 的 浏览 器 中 的 兼容 性 见 表 7-6 。 
表 7-6 3 种 视频 格式 的 浏览 器 兼容 性 











视频 格式 IE9+ Firefox Opera Chrome Safari 
Ogg Vv Vv JV 

MP4 V V V/ 
WebM V/ V/ V/ 

















2. 过 video 之 标签 的 属性 
二 video 二 标签 的 属性 见 表 7-7。 


表 7-7 video > 标签 的 属性 
属 性 描 述 
autoplay | 如 果 出 现 该 属性 , 则 视频 在 就 绪 后 马上 播放 
controls | 如 果 出 现 该 属性 , 则 向 用 户 显示 控件 ,比如 播放 、 和 暂停 和 音量 控件 
height 设置 视频 播放 器 的 高 度 

















loop 如 果 出 现 该 属性 , 则 每 当 音频 结束 时 重新 开始 播放 

,coad | 如 果 出 现 该 属性 , 则 视频 在 页 面 加 载 时 进行 加 载 ,并 预备 播放 。 如 果 使 用 autoplay, 则 忽 
® 略 该 属性 

ee 要 播放 音频 的 URL 











width 设置 视频 播放 器 的 宽度 


【 例 7-4】 使 用 二 video 二 标签 播放 视频 ,本 例文 件 7-4. html 在 浏览 器 中 的 显示 效果 
如 图 7-4 所 示 。 
代码 如 下 : 


< !goctype html> 
<html> 
<head> 
<meta charset— "gb2312"> 
<title> 视 频 标 签 video 示 例 < /title> 
< /head> 
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人 DAweb\ch7\7-4.html 








司 视 顺 标 符 video 示 例 x| 








播放 视频 











图 7-4 例 7-4 的 页 面 显示 效果 


<body> 
<h3> 播 放 视 频 < /h3> 
< vigeo controls= "controls" autoplay= "autoplay"> 
< source src= "video/movie.rp4" type= "video/rp4" /> 
< source src= "video/movie.webm" type= "video/webm" /> 
< Source src= "video/movie.ogg" type= "video/ogg" /> 
您 的 浏览 器 不 支持 视频 标签 
< /video> 
< /pody> 
</htm> 


【说 明 】 
(1) 二 video 记 与 三/video 志 标签 之 间 插入 的 内 容 是 提供 不 支持 二 video 二 标签 的 浏览 


器 显示 的 。 


(2) 二 video 二 标签 同样 允许 包含 多 个 二 source 二 标签 ,这 里 不 青 袭 述 。 


7.2.4 HTML 5 多 媒体 API 


HTML 5 中 提供 了 Video 和 Audio 对 象 ,用 于 控制 视频 或 音频 的 回放 及 当前 状态 等 


信息 ,Video 和 Audio 对 象 的 相似 度 非常 高 ,区 别 在 于 所 占 屏幕 空间 不 同 ,但 属性 与 方法 
基本 相同 。Video 和 Audio 对 象 常用 的 属性 见 表 7-8 。 


表 7-8 Video 和 Audio 对 象 常用 的 属性 














属 性 描 述 
autoplay 用 于 设置 或 返回 是 否 在 就 绪 ( 加 载 完成 ) 后 随即 播放 音频 
controls 用 于 设置 或 返回 视频 (音频 ) 是 否 应 该 显示 控件 (比如 播放 /暂停 等 ) 
currentSrc 返回 当前 视频 或 (音频 ) 的 URL 





182 


第 7 章 HM_ 5 高 级 应 用 









































续 表 
属 性 描 述 
currentTime 用 于 设置 或 返回 视频 (音频 ) 中 的 当前 播放 位 置 (以 秒 计 ) 
duration 返回 视频 (音频 ) 的 总 长 度 (以 秒 计 ) 
defaultMuted 用 于 设置 或 返回 视频 (音频 ) 默 认 是 否 静 音 
muted 用 于 设置 或 返回 是 否 关闭 声音 
ended 返回 视频 (音频 ) 的 播放 是 否 已 结束 
readyState 返回 视频 (音频 ) 当 前 的 就 绪 状 态 
paused 用 于 设置 或 返回 视频 (音频 ) 是 否 暂 停 
volume 用 于 设置 或 返回 视频 (音频 ) 的 音量 
loop 用 于 设置 或 返回 视频 (音频 ) 是 否 应 在 结束 时 再 次 播放 
networkState 返回 视频 (音频 ) 的 当前 网 络 状态 
src 用 于 设置 或 返回 视频 (音频 ) 的 src 属性 的 值 





Video 和 Audio 对 象 常用 的 方法 见 表 7-9。 
表 7-9 Video 和 Audio 对 象 常用 的 方法 




















方 法 描 述 
play() 开始 播放 视频 (音频 ) 
pause() 暂停 当前 播放 的 视频 (音频 ) 
load() 重新 加 载 视频 (音频 ) 元 素 
canPlayType() 检查 浏览 器 是 否 能 够 播放 指定 的 视频 (音频 ) 类 型 
addTextTrack() 向 视频 (音频 ) 添 加 新 的 文本 轨道 


【 例 7-5】 使 用 Video 对 象 创建 一 个 自 定义 视频 播放 器 ,播放 器 包括 “开始 播放 ”/* 和 暂 
停 播放 ”按钮 ,播放 进度 信息 和 “静音 ”/* 取 消 静 音 ” 按 钮 ,本 例文 件 7-5. html 在 浏览 器 中 
的 显示 效果 如 图 7-5 所 示 。 


| 


国 DAwebwh7V7-5html 万 -~GX y 
局 汪 几 video 各 S 定 X 届 及 .| | 




































Ov p- cx 
[Bemvaconensima "| | 














EE 




















100% ~ 加 100% ~ 





图 7-5 例 7-5 的 页 面 显示 效果 
代码 如 下 : 


< ldoctype html> 
<html> 
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<head> 
<meta charset= "gb2312"> 
<title> 使 用 Vigeo 对 象 自 定义 视频 播放 器 < /title> 
<body> 
<div id "videoDiv"> 
< video jd- "myVideo" controls> 
< source src= "video/movie.nmp4" type= "vigdeo/rp4" /> 
< source src= "video/movie.webm" type= "video/webm" /> 
< source src= "video/movie.ogg" type= "video/ogg" /> 
您 的 浏览 器 不 支持 <vigeo /> 标签 
< /video> 
</div> 
<div id "controlBar"> 
< input id "videoplayer" type= "button" value= "开始 播放 " /> 
< input idF "videoInfo" type= "text" disabled style= "width: 70px"/> 
< input id "videcVbice" type= "button" value= "静音 " /> 
</div> 
< Script type= "text/javascript"> 
Var myYVideo= document .getElementById ("myVideo"); 
Var Videoplayer= document .getElementById ("videoplayer"); 
Var VidecoVoice= document .getElementById ("videoVoioe"); 
Var VideoInfo= document .getElementById ("videoInfo"); 
/| 播放 暂停 按钮 
videoPlayer.onclick= function() { 
if (myWideo.paused) { 
myideo.play (); 
videocPlayer.value= 嘲 停 播放 "; 
Jelse{ 
mideo.pause ()7 
videcPlayer.value= "开始 播放 "; 


Bs 
// 视 频 播 放 时 ,播放 进度 信息 同步 
IyVideo.ontimeupdate= function(){ 
var currentTime= myideo.currentTime.toFixed(2); 
Var totalTime= myVideo.duration.torixed (2); 
VigeoInfo.value= currentTimet "/"+ totalTime; 
BB 
// 静 音 或 取消 静音 
Videcvbice.anclick= fancticn (){ 
if (tmyVigeo.mited) { 
videoVoice.value= "取消 静音 "; 
myVideo.muted= true; 
Jelse{ 
videoVoice.value-" 钥 音 "; 
mideo.muted false; 
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了 
< /script> 
< /pody> 
</htm> 
【说 明 】 本 例 中 显示 的 播放 进度 信息 包括 当前 播放 时 间 和 总 播放 时 间 ,二 者 都 保留 
了 两 位 小 数 , 实 现 的 方法 是 使 用 toFixed() 方 法 将 数字 四 舍 五 人 为 指定 小 数位 数 的 数字 。 


73 ”Canves 绘图 


HTML 5 的 二 canvas 二 元 素 有 一 个 基于 JavaScript 的 绘图 API, 在 页 面 上 放置 一 个 
所 canvas 二 元素 就 相当 于 在 页 面 上 放置 了 一 块 “ 画 布 *, 可 以 在 其 中 进行 图 形 的 描绘 。 
去 canvas 过 元 素 拥有 多 种 绘制 路 径 .矩形 、 圆 形 .字符 以 及 添加 图 像 的 方法 ,设计 者 可 以 控 
制 其 每 一 像素 。 


7.3.1 创建 二 canvas 之 元 素 


所 canvas 二 元素 的 主要 属性 是 画布 宽度 属性 width 和 高 度 属性 height, 单 位 是 像素 。 
向 页 面 中 添加 所 canvas 二 元 素 的 语法 格式 如 下 : 
< carvas jd "画布 标识 " width= "画布 宽度 "height= "画布 高 度 > 


< /carvas> 

一 canvas 二 看 起 来 很 像 一 img 二 ,唯一 不 同 就 是 它 不 包含 src 和 alt 属性 。 如 果 不 指 
定 width 和 height 属性 值 ,默认 的 画布 大 小 是 宽 300 像素 ,高 150 像素 。 

例如 ,创建 一 个 标识 为 myCanvas ,宽度 为 200 像素 ,高 度 为 100 像素 的 所 canvas 二 元 
素 , 代 码 如 下 : 


< canvas jdF "myCanvas" width= "200" height= "100"> < /carvas> 


7.3.2 构建 绘图 环境 


大 多 数 二 canvas 二 绘图 API 都 没有 定义 在 二 canvas 二 元 素 本 身上 ,而 是 定义 在 通过 
画布 的 getContext() 方 法 获得 的 一 个 “绘图 环境 ”对 象 上 。getContext() 方 法 返回 一 个 用 
于 在 画布 上 绘图 的 环境 ,其 语法 格式 如 下 : 


Carvas .getContext (contextID) 


参数 contextID 指定 了 用 户 想 要 在 画布 上 绘制 的 类 型 。2D 即 二 维 绘 图 ,这 个 方法 返 
回 一 个 上 下 文 对 象 CanvasRenderingContext2D ,该 对 象 导出 一 个 二 维 绘图 API。 
185 


Web 前 端 开发 实例 教程 一 HIM 5+ JavaScript + jQuery 





7.3.3 通过 JavaScript 绘制 图 形 


去 canvas 过 元 素 只 是 图 形容 器 ,其 本 身 是 没有 绘图 能 力 的 ,所 有 的 绘制 工作 必须 在 
JavaScript 内 部 完成 。 

在 画布 上 绘图 的 核心 是 上 下 文 对 象 CanvasRenderingContext2D, 用 户 可 以 在 
JavaScript 代码 中 使 用 getContext() 方 法 泻 染 上 下 文 进而 在 画布 上 显示 形状 和 文本 。 

JavaScript 使 用 getElementById 方法 通过 canvas 的 id 定位 canvas 元 素 , 代 码 如 下 : 


Var myCanvas= document .getElementById ('myCanvas'); 
然后 创建 context 对 象 ,代码 如 下 : 
Var myContext= myCanvas .getContext ("2d"); 


getContext() 方 法 使 用 一 个 上 下 文 作为 其 参数 ,以 便 程序 就 可 以 调用 各 种 绘图 方法 。 
表 7-10 列 出 了 泻 染 上 下 文 对 象 的 常用 方法 。 


表 7-10 泻 染 上 下 文 对 象 的 常用 方法 


方 。” 法 


描 述 





fillRect() 


绘制 一 个 填充 的 矩形 





strokeRect() 


绘制 一 个 矩形 轮廓 





























clearRect() 清除 画布 的 矩形 区 域 
lineTo() 绘制 一 条 直线 

arc() 绘制 圆 弧 或 加 

moveTo() 当前 绘图 点 移动 到 指定 位 置 
beginPath() 开始 绘制 路 径 

closePath() 标记 路 径 绘制 操作 结束 
stroke() 绘制 当前 路 径 的 边框 

fillO) 填充 路 径 的 内 部 区 域 
filText() 在 画布 上 绘制 一 个 字符 串 





createLinearGradient() 


创建 一 条 线性 颜色 渐变 





drawJImage() 





把 一 幅 图 像 放置 到 画布 上 


需要 说 明 的 是 ,canvas 画布 的 左上 角 为 坐标 原点 (0,0) 。 


1. 绘制 矩形 
1) 绘制 填充 的 矩形 


fillRect() 方 法 用 来 绘制 填充 的 矩形 ,语法 格式 如 下 : 


fillRect (x, Y weight, height) 


其 中 的 参数 含义 如 下 。 
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x, y: 和 矩形 左上 角 的 坐标 。 

weight，height: 和 矩形 的 宽度 和 高 度 。 

【说 明 】 fillRect() 方 法 使 用 fillStyle 属性 所 指定 的 颜色 .渐变 和 模式 来 填充 指定 的 
矩形 。 

2) 绘制 矩形 轮廓 

strokeRect() 方 法 用 来 绘制 矩形 的 轮廓 ,语法 格式 如 下 : 


StrokeRect (x, y, weight, height) 


其 中 的 参数 含义 如 下 。 
x, y: 矩形 左上 角 的 坐标 。 
weight，height: 矩形 的 宽度 和 高 度 。 
【说 明 】 strokeRect() 方 法 按照 指定 的 位 置 和 大 小 绘制 一 个 矩形 的 边框 (但 并 不 填 
充 矩形 的 内 部 ) ,线条 颜色 和 线条 宽度 由 strokeStyle 和 lineWidth 属性 指定 。 
【 例 7-6】 绘制 填充 的 矩形 和 和 矩形 轮 廊 ,本 例文 件 7-6. 
html 在 浏览 器 中 的 显示 效果 如 图 7-6 所 示 。 ee 
代码 如 下 S emer 


< !doctype html> 
<html> 
< head> 
<meta charset= "go2312"> 
<title> 绘 制 矩 形 < /title> 
< [head> 图 7-6 例 7-6 的 页 面 显 示 效 果 
<body> 
< canvas icF "myCanvas" width= "200" height= "100" style= "border: lpx solid 
#c3c3c3;"> 
您 的 浏览 器 不 支持 canvas 元 素 
< /canvas> 
< script type= "text/javascript"> 
var c= document .getElementById("mycanvas"); 。””// 获 取 画 布 对 象 




















Var cxt= c.getContext ("2d") ; // 获 取 画 布 上 绘图 的 环境 
cxt.fillStyle= 啡 ff0000"7 // 设 置 填充 颜色 
cxt.fil]Rect (0,0,100,50)7 // 绘 制 填充 矩形 
Caxt .strokeStyle= "# 0000ff"; // 设 置 轮廓 颜色 
cxt.lineWidth= "5"7 // 设 置 轮廓 线条 宽度 
cat .strokeRect (120, 60, 70, 30) ; // 绘 制 算 形 轮廓 
< /script> 
< [body> 
< /hbm> 
2. 绘制 路 径 


(1) lineTo() 方 法 。lineTo() 方 法 用 来 绘制 一 条 直线 ,语法 格式 如 下 : 


lineTo (x, y) 
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其 中 的 参数 含义 如 下 。 

x, y: 直线 终点 的 坐标 。 

【说 明 】 lineTo 〇 方法 为 当前 子路 径 添 加 一 条 直线 。 这 条 直线 从 当前 点 开始 ,到 (x,y) 
结束 。 当 方法 返回 时 ,当前 点 是 (x,y)。 

(2) moveTo() 方 法 。 在 绘制 直线 时 ,通常 配合 moveTo() 方 法 设置 绘制 直线 的 当前 
位 置 并 开始 一 条 新 的 子路 径 , 其 语法 格式 如 下 : 


ImoveIo (x, y) 


其 中 的 参数 含义 如 下 。 

x，y: 新 的 当前 点 的 坐标 。 

【说 明 】 moveTo() 方 法 将 当前 位 置 设置 为 (x，y) 并 用 它 作 为 第 一 点 创建 一 条 新 的 
子路 径 。 如 果 之 前 有 一 条 子路 径 并 且 它 包含 刚刚 的 那 一 1 = 
点 ,那么 从 路 径 中 删除 该 子路 径 。 

【 例 7-7】 绘制 直线 ,本 例文 件 7-7. html 在 浏览 器 中 
的 显示 效果 如 图 7-7 所 示 。 

代码 如 下 : 


< ldoctype html> 
<html> 
<head> 
i 图 7-7 例 7-7 的 页 面 显示 效果 
<title> 绘 制 直线 < /title> 
< /head> 
<body> 
< canvas ic "myCanvas" width= "200" height= "100" style= "border: lpx solid 
#c3c3c3;"> 
您 的 浏览 器 不 支持 canvas 元 素 
< /canvas> 
< script type= "text/javascript"> 
Var C= document .getElementById ("myCanvas"); // 获 取 画 布 对 象 


























Var cxt= c.getContext ("2d") ; // 获 取 画 布 上 绘图 的 环境 
cat moveTo (10,10); // 定 位 绘图 起 点 
cxt.strokeStyle= "#0000ff"; // 设 置 线条 颜色 
Cat.. lineWidth= "2"7 // 设 置 线条 宽度 
c 呈 .lineTo (150, 50); // 第 一 条 直线 的 终点 坐标 
cx.lineTo(10,50)7 // 第 二 条 直线 的 终点 坐标 
cxt.stroke (); // 绘 制 当前 路 径 的 边框 
< /script> 
< /pody> 
< /hbm> 
【说 明 】 本 例 中 使 用 了 moveTo() 方 法 指定 了 绘制 直线 的 起 点 位 置 ,lineTo() 方 法 接 
受 直线 的 终点 坐标 ,最 后 stroke() 方 法 完成 绘图 操作 。 


当 用 户 要 绘制 一 个 路 径 封 闭 的 图 形 时 ,需要 使 用 beginPath() 方 法 初始 化 绘制 路 径 和 
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closePath() 方 法 标记 路 径 绘制 操作 结束 。 
(3) beginPath() 方 法 。 其 语法 格式 如 下 : 


beginpath() 


【说 明 】 beginPath() 方 法 丢弃 任何 当前 定义 的 路 径 并 且 开 始 一 条 新 的 路 径 , 并 把 当 
前 的 点 设置 为 (0,0) 。 当 第 一 次 创建 画布 的 环境 时 ,beginPath() 方 法 会 被 显 式 地 调用 。 
(4) closePath() 方 法 。 其 语法 格式 如 下 : 


ClosePath() 


【说 明 】 closePath() 方 法 用 来 关闭 一 条 打开 的 子路 径 。 如 果 画 布 的 子路 径 是 打开 
的 ,closePath() 方 法 通过 添加 一 条 线条 连接 当前 点 和 子路 径 起 始点 来 关闭 它 ; 如 果子 路 
径 已 经 闭合 了 ,这 个 方法 不 做 任何 事情 。 一 旦 子路 径 闭 合 ,就 不 能 再 为 其 添加 更 多 的 直线 
或 曲线 了 ;如 果 要 继续 向 该 路 径 添 加 直线 或 曲线 ,需要 调用 moveTo() 方 法 开始 一 条 新 的 
子路 径 。 

【 例 7-8】 绘制 一 个 三 角形 ,本 例文 件 7-8. html 在 浏 




















览 器 中 的 显示 效果 如 图 7-8 所 示 。 ee Peer 
碟 绘制 三 角形 X 
代码 如 下 
< !doctype html> 
<html> 
<head> 





<meta charset= "gb2312"> 
图 7-8 例 7-8 的 页 面 显示 效果 
<body> 
< canvas id= "myCanvas" width= "200" height= "100" style= "border: lpx solid 
#4c3c3c3;"> 
您 的 浏览 器 不 支持 canvas 元素 
< /canvas> 
< script type= "text/javascript"> 
Var C= document .getElementById ("myCanvas"); 





Var Cxt= c.getContext ("2d"); // 获 取 画 布 对 象 
cxt.strokestyle= "#0000ff"; // 获 取 画 布 上 绘图 的 环境 
cat .lineWidth= "2"; // 设 置 线 条 颜色 
Cxt .beginPath(); // 设 置 线条 宽度 
Cat .moveTo (50,20)7 // 定 位 绘图 起 点 
cst.lineTo(150,80)7 // 第 一 条 直线 的 终点 坐标 
cxt.lineTo(20,60)7 // 第 二 条 直线 的 终点 坐标 
cz-closePath()7 // 封 闭路 径 , 使 第 一 条 直线 的 起 点 坐标 与 第 二 条 直 
// 线 的 终点 坐标 闭合 
Cxt.stroke(); // 绘 制 当前 路 径 的 边框 
< /script> 
< /body> 
< /html> 
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【说 明 】 本 例 中 使 用 beginPath() 方 法 初始 化 路 径 , 第 一 次 使 用 moveTo() 方 法 改变 
当前 绘画 位 置 到 (50,20) ,接着 使 用 两 次 lineTo() 方 法 绘制 三 角形 的 两 边 ,最 后 使 用 
closePath() 关 闭路 径 形 成 三 角形 的 第 三 边 。 


3. 绘制 圆 弧 或 圆 


arc() 方 法 使 用 一 个 中 心 点 和 半径 ,为 一 个 画布 的 当前 子路 径 添 加 一 条 弧 ,语法 格式 
如 下 : 


arc (Xx, Y radius, startAngle, endAngle, comnterclockwise) 


其 中 的 参数 含义 如 下 。 
xy: 描述 弧 的 圆 形 的 圆心 坐标 。 
radius: 描述 弧 的 圆 形 的 半径 。 
startAngle, endAngle: 沿 着 圆 指定 弧 的 开始 点 和 结束 点 的 一 个 角度 。 这 个 角度 用 
弧度 来 衡量 , 沿 着 x 轴 正 半 轴 的 三 点 钟 方向 的 角度 为 0, 角 度 沿 着 逆 时 针 方向 而 增加 。 
counterclockwise: 弧 沿 着 圆周 的 道 时 针 方 向 (TRUE) 还 是 顺 时 针 方 向 (FALSE) 
遍历 。 
【说 明 】 这 个 方法 的 前 5 个 参数 指定 了 圆周 的 一 个 起 始点 和 结束 点 。 调 用 这 个 方法 
会 在 当前 点 和 当前 子路 径 的 起 始点 之 间 添 加 一 条 直线 。 接 下 来 , 它 沿 着 圆周 在 子路 径 的 
起 始点 和 结束 点 之 间 添 加 弧 。 最 后 一 个 counterclockwise 参数 指定 了 圆 应 该 沿 着 哪个 方 
向 遍历 来 连接 起 始点 和 结束 点 。 
【 例 7-9】 绘制 圆 弧 和 圆 ,本 例文 件 7-9. html 在 浏览 
器 中 的 显示 效果 如 图 7-9 所 示 。 
代码 如 下 : 
< lgoctype html> 
<html> 
< head> 
<meta charset= "gb2312"> 
<title> 绘 制 圆 弧 和 圆 < /title> 
< /head> 图 7-9 例 7-9 的 页 面 显示 效果 
<body> 
< canvas id- "myCanvas" width= "200" height= "100" style= "border: lpx solid 
#c3c3c3;"> 
您 的 浏览 器 不 支持 canvas 元 素 
< /canvas> 
< script type= "text/javascript"> 
Var c= document.getElementById("myCanvas");  ”// 获 取 画 布 对 象 


























Var cxt= c.getContext ("2d") ; // 获 取 画 布 上 绘图 的 环境 
Cxt .fillStyle= "# ff0000"; // 设 置 填充 颜色 
cxt-beginPath 07 // 初 始 化 路 径 
cxt.arc (60, 50,20,0,Math. PI * 2,true); // 逆 时 针 方向 绘制 填充 的 圆 
cxt.closePath(); // 封 闭路 径 

Cat.fi11(); // 填 充 路 径 的 内 部 区 域 
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Cxt-beginPath(); // 初 始 化 路 径 
Cxt..arc (140, 40, 20, 0,Math.PI, true); // 道 时 针 方向 绘制 填充 的 圆 弧 
cxt.closePath(); // 封 闭路 径 
Cxt.fi11(); // 填 充 路 径 的 内 部 区 域 
cx-beginPath (07 // 初 始 化 路 径 
cxt.arc(140,60,20,0,Math.PI,false); // 顺 时 针 绘 制 圆 弧 的 轮廓 
cxt.closePath(); // 封 闭路 径 
cat.stroke (); // 绘 制 当前 路 径 的 边框 
< /script> 
< /body> 
</him> 


【说 明 】 本 例 中 使 用 fill() 方 法 绘制 填充 的 圆 弧 和 圆 , 如 果 只 是 绘制 圆 弧 的 轮廓 而 不 
填充 , 则 使 用 stroke() 方 法 完成 绘制 。 


4. 绘制 文字 
(1) 绘制 填充 文字 。fillText() 方 法 用 于 填充 方式 绘制 字符 串 ,语法 格式 如 下 : 


£111Text (text,x,y, [mexWidth]) 


其 中 的 参数 含义 如 下 。 

text: 表示 绘制 文字 的 内 容 。 

x，y: 绘制 文字 的 起 点 坐标 。 

maxWidth: 可 选 参数 ,表示 显示 文字 的 最 大 宽度 ,可 以 防止 溢出 。 

(2) 绘制 轮廓 文字 。strokeText() 方 法 用 于 轮廓 方式 绘制 字符 串 ,语法 格式 如 下 : 


strokeText (text, x,y, ImaxWidth]) 


该 方法 的 参数 部 分 的 解释 与 fillText() 方 法 相同 。 
fillText() 方 法 和 strokeText() 方 法 的 文字 属性 设置 如 下 。 























font: 字体 。 | 
textAlign: 水 平 对 齐 方式 。 [TD 
textBaseline: 垂直 对 齐 方式 。 全 绘制 文 字 x 
本 给 你 :二 = ~ 一 
【 例 7-10】 绘制 填充 文字 和 轮廓 文字 本 例文 画布 上 绘制 的 文字 
件 7-10. html 在 浏览 器 中 的 显示 效果 如 图 7-10 所 示 。 cn 
代码 如 下 ， 团 
< _ !doctype html> 肥 100% 
<html> i 和 
es 图 7-10 例 7-10 的 页 面 显示 效果 
<meta charset= "gb2312"> 
<title> 绘 制 文字 < /title> 
< /head> 
<body> 
< canvas id "myCanvas" width= "200" height= "100" style= "border: lpx solid 
#c3c3c3;"> 
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您 的 浏览 器 不 支持 canvas 元 素 

< /canvas> 

< script type= "text/javascript"> 
var c= document .getElementById("myCanvas"); ”// 获 取 画 布 对 象 
Var cxt= c.getContext ("2d"); // 获 取 画 布 上 绘图 的 环境 
cxt.fillStyler "# ff0000"; // 设 置 填充 颜色 
cxt.font= "16pt 黑体 '; 
cxt.fillText ("画布 上 绘制 的 文字 ', 10, 30); // 绘 制 填充 文字 


Cxt.strokeStyle= "# 0000ff"; // 设 置 线条 颜色 
Cxt.. shadowof fset X= 5; // 设 置 阴影 向 右 偏 移 5 像素 
Cxt .shadowoffsetY= 5; // 设 置 阴影 向 下 偏 移 5 像素 
cat.shadowBlur= 10; // 设 置 阴影 模糊 范围 
Cxt.shadowColor= "black'; // 设 置 阴影 的 颜色 
Cxt. lineWidth= "1"; // 设 置 线条 宽度 
cxt.font= "40pt 黑体 '; 
cat.strokeText (' 宇 宙 '，40,80); // 绘 制 轮 廓 文字 
</script> 
< /pody> 
</htm> 


【说 明 】 本 例 中 的 填充 文字 使 用 的 是 默认 的 渲染 属性 ,轮廓 文字 使 用 了 阴影 泻 染 属 


性 ,这 些 属性 同样 适用 于 其 他 图 形 。 





S. 绘制 渐变 


1) 绘制 线性 渐变 
createLinearGradient() 方 法 用 于 创建 一 条 线性 颜色 渐变 ,语法 格式 如 下 
createLinearGradient (xStart, ystart, xEnd, yend) 

其 中 的 参数 含义 如 下 。 

xStart，yStart: 渐变 的 起 始点 的 坐标 。 

xEnd,yEnd: 渐变 的 结束 点 的 坐标 。 

【说 明 】 该 方法 创建 并 返回 了 一 个 新 的 CanvasGradient 对 象 , 它 在 指定 的 起 始点 和 


结束 点 之 间 线 性 地 内 插 颜色 值 。 这 个 方法 并 没有 为 渐变 指定 任何 颜色 ,用 户 可 以 使 用 返 
回 对 象 的 addColorStopO 〇 来 实现 这 个 功能 。 要 使 用 一 个 渐变 来 勾勒 线条 或 填充 区 域 , 只 
需要 把 CanvasGradient 对 象 赋 给 strokeStyle 属性 或 fillStyle 属性 即 可 。 
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2) 绘制 径 向 渐变 

(1) createRadialGradient() 方 法 用 于 创建 一 条 放射 颜色 渐变 ,语法 格式 如 下 : 
其 中 的 参数 含义 如 下 。 

xStart，yStart: 开始 圆 的 圆心 坐标 。 

radiusStart: 开始 圆 的 半径 。 

xEnd, yEnd: 结束 圆 的 圆心 坐标 。 
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radiusEnd: 结束 圆 的 半径 。 

【说 明 】 该 方法 创建 并 返回 了 一 个 新 的 CanvasGradient 对 象 ,该 对 象 在 两 个 指定 圆 
的 圆周 之 间 放 射 性 地 插值 颜色 。 这 个 方法 并 没有 为 渐变 指定 任何 颜色 ,用 户 可 以 使 用 返 
回 对 象 的 addColorStop0O 〇 方法 来 实现 这 个 功能 。 要 使 用 一 个 渐变 来 勾勒 线条 或 填充 区 
域 ,只 需要 把 CanvasGradient 对 象 赋 给 strokeStyle 属性 或 fillStyle 属性 即 可 。 

(2) addColorStop() 方 法 在 渐变 中 的 某 一 点 添加 一 个 颜色 变化 ,语法 格式 如 下 : 


acticolorStcp (offset, color) 


其 中 的 参数 含义 如 下 。 
offset: 这 是 一 个 范围 在 0.0 到 1.0 的 浮 点 值 ,表示 渐变 的 开始 点 和 结束 点 之 间 的 偏 
移 量 。offset 为 0 对 应 开始 点 ,offset 为 1 对 应 结束 点 。 
color: 指定 offset 显示 的 颜色 , 沿 着 渐变 某 一 点 的 颜 
色 是 根据 这 个 值 以 及 任何 其 他 的 颜色 色 标 来 插值 的 。 $y 
【 例 7-11】 绘制 线性 渐变 和 径 向 渐变 ,本 例文 “| 人 sis 
件 7-11. html 在 浏览 器 中 的 显示 效果 如 图 7-11 所 示 。 
代码 如 下 : 


< !doctype html> 
<html> 
<head> 
<meta harset= "gb2312"> 图 7-11 例 7-11 的 页 面 显示 效果 
<title> 绘 制 渐变 < /title> 
< /head> 
<body> 
< canvas id= "myCanvas" width= "200" height= "100" style= "border: lpx solid 
#c3c3c3;"> 
您 的 浏览 器 不 支持 canvas 元 素 
< /canvas> 
< Script type= "text/javascript"> 
Var C= document .getElementById ("myCanvas"); 
Var Cxt= c.getContext ("2d"); 


























var grd- cxt .createLinearGradient (10, 0, 180, 30) ; /绘制 线性 渐变 
gmrd.addcolorStop (0," 啡 00ff00)7 // 渐 变 起 点 
gmrd.addcolorstop (1, "# 0000ffF") ; /| 渐变 结束 点 


cxt.fillstyle= grd; 
ct.fillRect (10,0, 180, 30) ; 
var radgradF cxt. .createRadialGradient (100, 70,1,100,70,30); /绘制 径 向 渐变 


radgrad.addcolorstop (0, "#00fFf00"); /渐变 起 点 
radgrad.addcolorstop (0.9, "# 0000ff"); /渐变 偏 移 量 
radgrad.addcolorstop (1, 啡 ffffffm) 7 // 渐 变 结束 点 


cxt.fillStyler radgrad; 
Cxt.fillRect (70, 40, 60, 60); 
</script> 
< /body> 
< /html> 
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6. 绘制 图 像 


canvas 相当 有 趣 的 一 项 功能 就 是 可 以 引入 图 像 , 它 可 以 用 于 图 片 合 成 或 者 制作 背景 
等 。 只 要 是 Gecko 排版 引擎 支持 的 图 像 ( 如 PNG、GIF、JPEG 等 ) 都 可 以 引入 canvas 中 ， 
并 且 其 他 的 canvas 元 素 也 可 以 作为 图 像 的 来 源 。 

用 户 可 以 使 用 drawImage() 方 法 在 一 个 画布 上 绘制 图 像 ,也 可 以 将 源 图 像 的 任意 甜 
形 区 域 缩放 或 绘制 到 画布 上 ,语法 格式 如 下 。 

格式 1: 


drawIrage (imagey x, 中 

格式 2: 
drawTmage (imege, x, y, width, height) 
格式 3: 


drawTmage (image, souroaX, souroeY, souroeWidth, souroceHeight, destX,destY, 
cestWidth, destHeight) 

drawImage() 方 法 有 3 种 格式 。 格 式 1 把 整个 图 像 复制 到 画布 ,将 其 放置 到 指定 点 
的 左上 角 , 并 且 将 每 个 图 像 像素 映射 成 画布 坐标 系统 的 一 个 单元 ;格式 2 把 整个 图 像 复制 
到 画布 ,但 是 允许 用 户 用 画布 单位 来 指定 想 要 图 像 的 宽度 和 高 度 ;格式 3 则 是 完全 通用 
的 , 它 允 许 用 户 指 定 图 像 的 任何 矩形 区 域 并 复制 它 , 对 画布 中 的 任何 位 置 都 可 进行 任何 的 
缩放 。 

其 中 的 参数 含义 如 下 。 

image: 所 要 绘制 的 图 像 。 

x，y: 要 绘制 图 像 左 上 角 的 坐标 。 

width，height: 图 像 实际 绘制 的 尺寸 ,指定 这 些 参数 使 图 像 可 以 缩放 。 

sourceX，sourceY: 图 像 所 要 绘制 区 域 的 左上 角 。 

sourceWidth，sourceHeight: 图 像 所 要 绘制 区 域 的 大 小 。 

destX, destY: 所 要 绘制 的 图 像 区 域 的 左上 角 的 画布 坐标 。 

destWidth，destHeight: 图 像 区 域 所 要 绘制 的 画布 大 小 。 

【 例 7-12】 绘制 图 像 。 页 面 中 依次 绘制 了 5 幅 图 像 ,分别 实现 了 原 图 绘制 .图 像 缩 
小 .图 像 裁剪 .裁剪 区 域 的 放大 和 裁剪 区 域 的 缩小 效果 .本 例文 件 7-12. html 在 浏览 器 中 
的 显示 效果 如 图 7-12 所 示 。 

代码 如 下 : 


< !doctype html> 
<html> 
<head> 
<meta charset= "gb2312"> 
<title> 绘 制图 像 < /title> 
< /head> 
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] DAweb\ch7\7-12.html Pr-ox| no 
情 给 和 图 对 x 


















































R100% ~ 
图 7-12 例 7-12 的 页 面 显示 效果 


<body> 

< canvas id= "myCanvas" width= "490" height= "170" style= "border: lpx solid 
#000"> 
您 的 浏览 器 不 支持 canvas 元 素 

< /canvas> 

< Script type= "text/javascript"> 
Var width= 80; 
var height= 100; 
Var C= document .getElementById ("myCanvas"); 
Var Cxt= c.getContext ("2d"); 
Var img= new JImage ()7 
img.src= "images/build.jpg"; 
cxt .drawIrage (img, 10, 10); // 绘 制 一 幅 图 像 
cxt..drawImage (img, 120, 10, 80, 120) ; // 绘 制 一 幅 图 像 ,并 可 以 调整 其 宽度 与 高 度 
cat .drawImage (img, 10, 10,width, height, 210, 10,width, height); 

// 从 原 图 中 进行 裁剪 ,并 进行 绘制 

Cxt .drawlrage (img, 10, 10,width, height, 310, 10,width* 1.1,height * 1.1)7 


// 将 裁剪 的 区 域 进行 放大 
Ct .drawlrage (img, 10, 10,width, height, 410, 10,width* 0.8,height * 0.8); 
// 将 裁剪 的 区 域 进行 缩小 
< /script> 
< /body> 
< /htm> 


canvas 绘画 功能 非常 强大 ,除了 以 上 所 讲 的 基本 绘画 方法 之 外 ,还 包括 设置 canvas 
绘图 样式 ,canvas 画布 处 理 .canvas 中 图 形 图 像 的 组 合 和 canvas 动画 等 功能 。 由 于 篇 幅 
所 限 ,本 书 未 能 涵盖 所 有 的 知识 点 ,读者 可 以 自学 其 他 相关 的 内 容 。 


74 HIM 5 地 理 定位 ARI 


地 理 定位 (Geolocation) 就 是 确定 某 个 设备 或 用 户 在 地 球 上 所 处 位 置 的 过 程 。 地 理 
定位 是 HTML 5 中 非常 重要 的 新 功能 。 使 用 地 理 定位 API 将 会 得 到 一 对 经 纬度 值 , 显 
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示 用 户 所 在 的 位 置 。 


7.4.1 Geolocation 基础 





在 学 习 地 理 定位 API 之 前 ,首先 要 测试 用 户 的 浏览 器 是 否 支 持 地 理 定位 API, 其 次 
还 要 了 解 地 理 定位 的 实现 方法 。 


1. 浏览 器 支持 


IE 9、Firefox、Chrome、Safari 以 及 Opera 浏览 器 都 支持 地 理 定 位 ,可 以 使 用 
JavaScript 来 验证 浏览 器 是 否 支持 地 理 定位 API。 代 码 如 下 : 
if (navigator.geolocaticn) { 
// 支 持 地 理 定位 BPI 时 执行 的 代码 
//navigator.geolocation 调 用 浏览 器 的 地 理 位 置 接口 
Jelse{ 
// 不 支持 地 理 定位 API 时 执行 的 代码 
} 


2. 地 理 定位 的 实现 方法 


目前 ,网 站 可 以 使 用 3 种 方法 来 确定 浏览 者 的 地 理 位 置 。 

(1) 通过 IP 地 址 定位 。 所 有 面向 公众 网 络 的 IP 地 址 及 其 纬度 /经 度 (latitude/ 
longitude) 位 置 都 被 存储 在 数据 库 中 。 一 旦 网 站 获得 了 浏览 者 的 IP 地 址 ,通过 一 个 简单 
的 查询 就 可 以 粗略 地 确定 浏览 者 所 在 的 地 理 位置 。 根 据 所 使 用 设备 的 质量 ,可 以 在 几米 
的 半径 范围 内 识别 浏览 者 所 在 的 位 置 。 

(2) 全 球 定位 系统 GPS。 全 球 定位 系统 GPS 是 一 个 由 24 颗 地 球 轨道 卫星 组 成 的 系 
统 ,GPS 向 这 些 卫 星 发 送 一 条 消息 ,利用 发 送 和 接收 该 消息 的 时 间 , 就 可 以 以 数 米 半径 的 
精度 ,确定 信息 发 送 者 的 纬度 和 经 度 。 对 于 需要 精确 定位 的 开发 人 员 来 说 ,GPS 是 一 个 
理想 的 解决 方案 。 

(3) 蜂窝 电话 基站 的 位 置 定位 。 这 种 地 理 定位 的 方法 是 根据 蜂窝 电话 基站 的 位 置 进 
行 三 角 定 位 ,尽管 有 时 不 完全 精确 ,但 该 方法 可 以 快速 地 定位 用 户 的 位 置 。 


7.4.2 Geolocation API 实现 地 理 定位 


无 论 采 用 上 述 哪 种 定位 技术 ,HTML 5 都 可 以 采用 它 进 行 定 位 。 
1. HTML 5 中 地 理 位 置 定位 的 方法 


Geolocation API 存在 于 navigator 对 象 中 ,只 包含 3 种 方法 。 
。 getCurrentPosition() : 获得 当前 位 置 。 
。 watchPosition() : 获得 监视 位 置 。 
。 clearWatch(): 进行 清除 监视 。 
196 


第 7 章 HL5 高 级 应 用 





具体 介绍 如 下 。 

(1) getCurrentPosition() 方 法 。 要 获取 地 理 位 置 ,Geolocation API 提供 了 两 种 模 
式 : 单 次 获得 和 重复 获得 地 理 位 置 。 单 次 获得 地 理 位 置 使 用 getCurrentPosition() 方 法 ， 
语法 格式 如 下 : 





该 方法 最 多 可 以 有 3 个 参数 。 
@ success: 成 功 获取 位 置信 息 的 回调 函数 , 它 是 方法 唯一 必需 的 参数 。 
@ error: 用 于 捕获 获取 位 置信 息 出 错 的 情况 。 
@ option: 第 三 个 参数 是 配置 项 ,该 对 象 影响 了 获取 位 置 时 的 一 些 细节 。 
如 果 获 得 地 理 位 置 成 功 , 则 getCurrentPosition() 方 法 返回 位 置 对 象 ,包含 以 下 属性 ， 
见 表 7-11 。 
表 7-11 位 置 对 象 的 属性 





























属 性 描 述 
coords. latitude 十 进 制 数 的 纬度 
coords. longitude 十 进 制 数 的 经 度 
coords. accuracy 位 置 精 度 
coords. altitude 海拔 高 度 ,海平 面 以 上 以 米 计 
coords. altitudeAccuracy 位 置 的 海拔 精度 
coords. heading 方向 ,从 正 北 开 始 以 度 计 
coords. speed 速度 ,以 米 / 秒 计 
timestamp 响应 的 日 期 /时 间 


(2) watchPosition() 方 法 。watchPosition() 方 法 的 参数 与 getCurrentPosition() 方 
法 的 参数 相同 ,用 于 返回 用 户 的 当前 位 置 , 并 继续 返回 用 户 移动 时 的 更 新 位 置 。 

watchPosition() 方 法 和 getCurrentPosition() 方 法 的 主要 区 别 是 它 会 持续 告诉 用 户 
位 置 的 改变 ,所 以 基本 上 它 一 直 在 更 新 用 户 的 位 置 。 当 用 户 在 移动 时 ,这 个 功能 会 非常 有 
利于 追踪 用 户 的 位 置 。 

(3) clearWatch() 方 法 。clearWatch() 方 法 用 于 停止 watchPosition() 方 法 。 


2. 在 地 图 上 显示 浏览 者 的 位 置 


HTML 5 提供 了 地 理 位 置信 息 的 API, 通 过 浏览 器 来 获取 用 户 当 前 位 置 。 基 于 此 特 
性 可 以 开发 基于 位 置 的 定位 服务 。 在 获取 地 理 位 置信 息 时 ,首先 浏览 器 都 会 向 用 户 询问 
是 否 愿 意 共 享 其 位 置信 息 , 待 用 户 同 意 后 才能 使 用 。 
【 例 7-13】 测试 浏览 者 的 位 置 。 单 击 页 面 中 的 * 试 一 下 ”按钮 ,弹出 对 话 框 询问 用 户 是 
否 共享 位 置信 息 ;用 户 同意 后 ,页 面 中 显示 出 用 户 所 在 的 经 度 与 纬度 ,本 例文 件 7-13. html 
在 浏览 器 中 的 显示 效果 如 图 7-13 和 图 7-14 所 示 。 
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单 击 这 个 按钮 ， 获 得 您 的 坐标 ， Latitude (纬度 ) : 34. 790187 
Longitude (经 度 ) : 114. 283922 





EEETD 




















图 7-13 浏览 器 询问 用 户 是 否 共享 位 置信 息 图 7-14 获取 用 户 的 纬度 与 经 度 
代码 如 下 : 


<html> 
<head> 
<title> 测 试 浏览 者 的 位 置 < /title> 
< /head> 
<body> 
<p id "Gemo"> 单 击 这 个 按钮 ,获得 您 的 坐标 : < /p> 
<button onclick= "getLocation()"> 试 一 下 < /button> 
<script> 
Var = document .getElementById ("demo"); 
function getLocation (){ 
if (navigator.geolocation) { 
navigator.geolocation.getCurrentPosition (showPosition); 
} 
else{ 
xX.innerHIM= "Geolocation is not supported by this browser."; 
} 
function showPositicn (position) { 
x.innerHIM[ 一 "Latitude (纬度 ) : "+position.coords.latitudet "<br /> 
Iongitude (经 度 ): "+position.coords.longitude; 
} 
< /script> 
< /body> 
< /html> 


【 例 7-14】 HTML 5 获取 地 理 位 置 及 百度 地 图 展示 实例 。 页 面 打 开 后 弹出 对 话 框 
询问 用 户 是 否 共享 位 置信 息 ; 用 户 同意 后 ,页 面 中 显示 出 用 户 在 百度 地 图 中 的 位 置 ,并 用 
红色 标记 标注 出 来 。 本 例文 件 7-14. html 在 浏览 器 中 的 显示 效果 如 图 7-15 所 示 。 

代码 如 下 : 


<htm> 
<head> 


第 7 章 HL5 高 级 应 用 





CC 
i 


您 在 百度 地 图 中 的 位 置 : 


Eh Bor" 


加 未来! 
加 体育 局 家 属 院 大 下 家 由 市 场 
® Rh 


各 水 蓝 城 
加 中国 区 动 。 “四 北京 次 家 亿 
开元 上 城 四 上 这 本 快 生 看 大 


百 型 允 EE 


有 同 灯 天 大 丙 店 人 @) 万 宇和 大 
加 9 市 等 4 学 HD 大 
开元 学 底 加 。 金池 名 郡 全 明光 坦 址 绞 
加 全 地 名 -Fi 场 
E 因 开 寺 市 下 府 国 93 因 Citi 
sn 四 万 本 = 
集 英 花园 昌 壬 答 ” amas 虽 日 狂 


龙 成 , 锦 业 花园 所) 
和 {mam oN 


i 回 HH 工业 学 校 网 四 
0 el 











图 7-15 HTML 5 获取 地 理 位 置 及 百度 地 图 展示 


<meta charset= "do?312"> 
<title> 地 理 位 置 测试 < /title> 
< script type= "text/javascript" src= "http: //api.map.baidu.ccoryapi?v= 
1.3"> < /script> 
< script type= "text/javascript" src= "http: //developer.baidu.com/map/ 
jsdemo/demo/corvertor.js"> 
< /script> 
< Script type= "text/javascript"> 
var map; 
Var gpsPoint; 
Var baiduPoint; 
Var gpshodress; 
Var baiduAodress; 
finction getIocation() { 
// 根 据 下 获取 城市 
Var myCity= new PMap.LocalCity(); 
myCity.get (getCityByIP); 
// 获 取 GPS 坐标 
if navigator.geolocaticn) { 
navigator.geolocation.getOmrrentPositicn (shcwMap，hanclePrror, 
{ enableHighAccuracy: true maximumage: 1000 }); 
} else { 
alert ("您 的 浏览 器 不 支持 使 用 EmML 5 来 获取 地 理 位 置 服务 "; 


} 
fimction showMap (value) { 
Var longitude= value.ooords.longitugde; 
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var latitude= value.coords.latituge; 
Tap= new BMP-Map ("map") ; 
//alert ("坐标 经 度 为 : 
gpsPoint— new BMap.Point (longituge, latitude); 
map.ocanterAand7oom (gpsPoint, 15); 

// 根 据 坐 标 逆 解析 地 址 

Var geoc= new BMap.Geocogder ()7 

geoc.getLocation (gpsPoint, getCityByCoordinate); 





为 : "+ longituge); 


BMap.Convertor .translate (gpsPoint, 0, translateCallback); 


} 

translateCallback= function (point) { 
baidupPoint=point; 
Var geoc= new BMap.Geocoder (); 


geoc.getLocation (baiduPoint, getCityByBaiduCoordinate); 


} 
function getCityByCoordinate (rs) { 
gpsAddress= rs.addressCanponents; 


var address= "GES 标注 : "+ gpsAcdress .provinoet+ " "+ gpshodress .city+ 
"+ pspoiress.districtt ","+ qpspcdress.streett+ ", "+ gqpsAcHress. 


StreetNumber; 


Var marker=new BMap.Marker (gpsPoint); 。”// 创 建 标注 
map.addoverlay (rarker); // 将 标注 添加 到 地 图 中 
Var labelgps= new EMap.Label (address, {offset: new BMap.Size(20, 


-10) 1D; 


rmarker.setLabel (labelgps); // 添 加 ces 标 注 


} 
finction getCityByBaiduCoordinate (rs) { 
baidnddress= rs .addressConrponents; 


var address= "百度 标注 : 对 baidumadress.provincet ","+ baiduAddress. 
Cityt+ ","+ baiduAddress.district+ ", "+ baiduAddress.street+ 


", "+ baiduAddress.streetNnber; 


var marker new BMap.Marker (baiduPoint); ”// 创 建 标注 
map.addoverlay (marker); // 将 标注 添加 到 地 图 中 
Var labelbaidu= new EMap.Label (address, {offset: new EMap.Size (20, 


一 10)))7 


rmarker.setLabel (labelbaidu); // 添 加 百度 标注 


1 
// 根 据 下 获取 城市 
fanction getCityBYIP(rs) { 


Var cityName= rs.name; 


alert(" 恨 据 下 定位 您 所 在 的 城市 为 : "+ cityName)7 


} 
function handlegrror (value) { 
switch (value.coge) { 

Case 1: 
alert(" 位 置 服务 被 拒绝 "7 
break; 
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aert( 暂 时 获取 不 到 位 置信 息 中 
break; 
Case 3: 
alert ("获取 信息 超时 "); 
break; 
Case 4: 
alert(" 末 知 错误 "); 
break; 
) 
} 
function init() { 
getLocation ()7 
} 
window.onloacF init; 
</script> 
< /head> 
<body> 
<h3> 您 在 百度 地 图 中 的 位 置 : < /h3> 
<div icF "map" style= "width: 800px;height: 800px;"> < /div> 
< /body> 
< /htm> 
【说 明 】 测试 实例 包含 以 下 功能 。 
(1) 通过 IP 地 址 获取 城市 地 址 (并 不 一 定 完全 准确 ,存在 代理 IP 或 IP 中 转 时 定位 
与 实际 位 置 不 一 致 的 情况 ) 。 
(2) 通过 浏览 器 及 GPS 定位 位 置 坐标 。 
(3) 根据 位 置 坐标 转换 百度 地 图 坐标 。 
(4) 根据 位 置 坐标 逆 推 城市 具体 地 址 功能 (有 时 存在 一 定 误差 ) 。 
(5) 通过 使 用 百度 API 展示 地 理 位 置 及 添加 标注 功能 。 


75 HIM_ 5 的 发 展 前 景 


HTML 5 在 快速 地 成 长 ,值得 所 有 人 密切 关注 。 随 着 Flash 的 落幕 ,HTML 5 技术 
已 经 取代 了 Flash 在 移动 设备 的 地 位 ,已 经 成 为 移动 平台 唯一 的 标准 。 其 实 ,HTML 5 的 
时 代 才 刚刚 开始 ,HTML 5 的 标准 在 不 断 完善 中 ,对 HTML 5 的 支持 和 应 用 也 刚 开始 受 
到 关注 。 

HTML 5 是 革命 性 的 , 它 强化 了 Web 网 页 的 表现 性 能 。 其 次 .HTML 5 追加 了 本 地 
数据 库 等 Web 应 用 的 功能 。 在 HTML 5 平台 上 ,视频 、 音 频 、 图 像 . 动 画 以 及 网 页 的 交互 
都 被 标准 化 ,HTML 5 将 成 为 一 种 最 基本 的 “互联 网 语言 ”。 

HTML 5 最 强大 的 生命 力 体现 在 其 破除 了 应 用 在 不 同 操作 系统 和 机 型 之 间 的 障碍 ， 
具有 巨大 的 跨 平台 优势 。 这 就 意味 着 ,基于 HTML 5 的 开发 应 用 ,可 以 在 搭载 不 同 操作 
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系统 的 终端 上 运行 ,这 对 广大 开发 者 来 说 绝对 是 一 个 福音 。 再 加 上 其 应 用 的 广泛 性 ,可 以 
便捷 地 完成 目前 所 需 的 各 种 应 用 ,包括 支持 文字 、 图 片 、 视 频 、 游 戏 , 且 不 需要 任何 插件 的 
帮助 。 

随 着 Google、Apple 等 创新 公司 的 发 展 ,HTML 5 技术 将 同 Google Chrome、Google 
Android 移动 操作 系统 .Apple iOS 等 日 渐 成 为 发 展 的 趋势 。 互 联网 巨头 脸谱 网 倾向 于 
HTML 5 十 CSS 3 十 jQuery, 革 果 掌 握 Apple iOS, Google 强 推 Android, 而 这 些 都 与 
HTML 5 密切 相关 。 可 以 预见 ,HTML 5 的 出 现 , 将 迎 来 互联 网 “大 一 统 ” 的 时 代 。 


习 题 


1. 使 用 HTML 5 拖 放 API 实现 购物 车 拖 放 效果 ,如 图 7-16 所 示 。 














图 7-16 题 1 图 


2. 使 用 二 video 二 标签 播放 视频 ,如 图 7-17 所 示 。 
3. 使 用 Canvas 元 素 绘制 圆 饼 图 ,如 图 7-18 所 示 。 
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图 7-17 题 2 图 图 7-18 题 3 图 
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4. 使 用 Geolocation API 实现 地 理 定位 ,首先 测试 浏览 器 是 否 支持 地 理 定位 ,如 果 支 
持 则 弹出 消息 框 显 示 支 持 的 信息 ; 单 击 * 确 定 ? 按 钮 后 ,再 次 弹出 消息 框 显示 当前 位 置 的 经 
度 与 纬度 ,如 图 7-19 所 示 。 
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图 7-19 题 4 图 
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jQuery 是 一 个 兼容 多 浏览 器 的 JavaScript 库 ,利用 jQuery 的 语法 设计 可 以 使 开发 者 
更 加 便捷 地 操作 文档 对 象 .选择 DOM 元 素 、 制 作 动画 效果 .进行 事件 处 理 、 使 用 Ajax 以 
及 其 他 功能 。 除 此 以 外 ,jQuery 还 提供 API 允许 开发 者 编写 插件 。 其 模块 化 的 使 用 方式 
使 开发 者 可 以 很 轻松 地 开发 出 功能 强大 的 静态 或 动态 网 页 。 


81 jQuery 概述 


8.1.1 什么 是 jQuery 


JavaScript 语言 是 Web 前 端 语言 发 展 过 程 中 的 一 个 重要 里 程 碑 ,其 实时 性 、 跨 平台 、 
简单 易 用 的 特点 决定 了 其 在 Web 前 端 设 计 中 的 重要 地 位 。 随 着 浏览 器 种 类 的 推陈出新 ， 
JavaScript 对 浏览 器 的 兼容 性 受到 了 极 大 挑战 ,2006 年 1 月 ,美国 John Resing 创建 了 一 
个 基于 JavaScript 的 开源 框架 一 一 jQuery。 与 JavaScript 相 比 ,jQuery 具有 代码 高 效 、 浏 
览 器 兼容 性 更 好 等 特征 , 极 大 地 简化 了 对 DOM 对 象 . 事 件 处 理 、 动 画 效果 以 及 Ajax 等 
操作 。 

jQuery 是 继 Prototype 之 后 又 一 个 优秀 的 JavaScript 库 。 它 是 轻 量 级 的 JS 库 , 兼 容 
CSS 3 ,还 兼容 各 种 浏览 器 (IE 6.0 十 .FF 1. 5 十 .Safari 2. 0 十 .Opera 9.0 十 ) 。jQuery 使 用 户 
能 够 更 加 方便 地 处 理 HTML、 事 件 ,实现 动画 效果 ,并 且 方便 地 为 网 站 提供 Ajax 交互 。 


8.1.2 jQuery 的 特点 


jQuery 的 设计 理念 是 “ 写 更 少 , 做 更 多 ”(Write Less, Do More), 是 一 种 将 
JavaScript、CSS、DOM.、Ajax 等 特征 集 于 一 体 的 强大 框架 ,通过 简单 的 代码 来 实现 各 种 页 
面 特效 。 

jQuery 的 特点 如 下 。 

(1) 访问 和 操作 DOM 元 素 。jQuery 中 封装 了 大 量 的 DOM 操作 ,可 以 非常 方便 地 
获取 或 修改 页 面 中 的 某 个 元 素 , 包 含 元 素 的 移动 .复制 .删除 等 操作 。 

(2) 强大 的 选择 器 。jQuery 允许 开发 人 员 使 用 CSS 1 一 CSS 3 所 有 的 选择 器 ,方便 快 
捷 地 控制 元 素 的 CSS 样式 ,并 很 好 地 兼容 各 种 浏览 





人 





(3) 可 靠 的 事件 处 理 机 制 。 使 用 jQuery 将 表现 层 与 功能 相 分 离 ,可 靠 的 事件 处 理 机 
制 让 开发 者 更 多 专注 于 程序 的 逻辑 设计 ;在 预 留 退 路 .循序渐进 以 及 非 入 侵 式 方面 ， 
jQuery 表现 得 非常 优秀 。 

(4) 完善 的 Ajax 操作 。Ajax 异步 交互 技术 极 大 方便 了 程序 的 开发 ,提高 了 浏览 者 
的 体验 度 ; 在 jQuery 库 中 将 Ajax 操作 封装 到 一 个 函数 $. ajax() 中 ,开发 者 只 需 专 心 实 
现 业务 逻辑 处 理 , 而 无 须 关注 浏览 器 的 兼容 性 问题 。 

(5) 链 式 操作 方式 。 在 某 一 个 对 象 上 产生 一 系列 动作 时 ,jQuery 允许 在 现 有 对 象 上 
连续 多 次 操作 , 链 式 操作 是 jQuery 的 特色 之 一 。 

(6) 完善 的 文档 : jQuery 是 一 个 开源 产品 ,提供 了 丰富 的 文档 。 


82 编写 jQuery 程序 
在 编写 jQuery 程序 之 前 ,需要 掌握 如 何 搭建 jQuery 的 开发 环境 。 


8.2.1 下 载 与 配置 jQuery 


1. 下 载 jQuery 


用 户 可 以 在 jQuery 的 官方 网 站 http://jquery. com/ 下 载 最 新 的 jQuery 库 。 在 下 载 
界面 可 以 直接 下 载 jQuery 1. x jQuery 2.x 和 jQuery 3. x 3 种 版 本 。 其 中 ,jQuery 1. x 版 
本 在 原来 的 基础 上 继续 对 IE 6 一 IE 8 版 本 的 浏览 器 进行 支持 ;而 jQuery 2. x 以 上 不 再 支 
持 IE 8 及 更 早 版 本 ,但 因 其 具有 更 小 、 更 快 等 特点 ,得 到 用 户 的 一 致 好 评 。 

每 个 版 本 又 分 为 以 下 两 种 : 开发 版 (Development Version) 和 生产 版 (Production 
Version) ,区 别 见 表 8-1。 


表 8-1 开发 版 和 生产 版 的 区 别 




















版 本 大 小 /KB 描 述 
jquery-1. x. js 约 288 
开发 版 ,完整 无 压缩 ,多 用 于 学 习 、 开 发 和 测试 
jquery-3. x. js 约 262 
本 的 :9 生产 版 ,经 过 压缩 工具 压缩 ,体积 相对 比较 小 , 主 
jquery-3. x. min. js 约 85 要 用 于 产品 和 项 目 中 


2. 配置 jQuery 


本 书 下 载 使 用 的 jQuery 是 jquery-3. 2. 1. min. js 生产 版 ,jQuery 不 需要 安装 ,将 下 载 
的 jquery-3.2.1. min.js 文件 放 到 网 站 中 的 公共 位 置 即 可 。 通 常 将 该 文件 保存 在 一 个 独 
立 的 文件 夹 js 中 ,只 需 在 使 用 的 HTML 页 面 中 引入 该 库 文件 的 位 置 即 可 。 
在 编写 页 面 的 二 head 二 标签 中 ,引入 jQuery 库 的 示例 代码 如 下 : 
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<head> 
< script src= "js/jquery- 3.2.1-min.js" type= "text/javascript"> < /script> 
< /head> 
需要 注意 的 是 ,引用 jQuery 的 二 script 之 标签 必须 放 在 所 有 的 自 定义 脚本 文件 的 
到 script 盖 之 前 ,否则 在 自 定义 的 脚本 代码 中 应 用 不 到 jQuery 脚本 库 。 


8.2.2 编写 一 个 简单 的 jQuery 程序 


在 页 面 中 引入 jQuery 库 后 ,通过 $ 0) 函数 来 获取 页 面 中 的 元 素 , 并 对 元 素 进 行 定位 或 
效果 处 理 。 在 没有 特别 说 明 下 , $ 符号 即 为 jQuery 对 象 的 缩写 形式 ,例如 ,$ ("myDiv") 
与 jQuery("myDiv") 完 全 等 价 。 

【 例 8-1】 编写 一 个 简单 的 jQuery 程序 ,本 例文 件 8-1. html 在 浏览 器 中 的 显示 效果 
如 图 8-1 所 示 。 








~ [2 
jpAweb\chs\s-lhim P -dx| 位 安 章 
总 第 一 从 Queny 程 序 x 


[smn 。。。  。 Ea 


企 第 一 从 Query 程 序 ! 





Km 



































胞 100% ~ 





图 8-1 例 8-1 的 页 面 显示 效果 


代码 如 下 : 


< !doctype html> 
<html> 
<head> 
<title> 第 一 个 jQuery 程序 < /title> 
< script src= "js/jquery-— 3.2.1.min.js" type= "text/javascript"> 
< /script> 
< Script> 
$ (Gocument) .ready (functicn (){ 
alert(" 第 一 个 jQuery 程序 !"); 
及) 
< /script> 
< /head> 
<body> 
< /pody> 
< /html> 
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【说 明 】 $ (document) 是 jQuery 的 常用 对 象 ,表示 HTML 文档 对 象 。 $ (document). 
ready() 方 法 指定 $ (document) 的 ready 事件 处 理 函 数 ,其 作用 类 似 于 JavaScript 中 的 
window. onload 事件 ,也 是 当 页 面 被 载 人 时 自动 执行 。 但 二 者 也 有 一 定 的 区 别 , 具 体 见 
表 8-2。 

表 8-2 ”window. onload 与 $ (document). ready() 的 区 别 


区 别 项 window. onload $ (document). ready() 





a a _| 在 页 面 中 所 有 DOM 结构 下 载 完毕 后 执 
执行 时 间 pa i 行 ,可 能 DOM 元 素 关联 的 内 容 并 没有 
加 载 完毕 





一 个 页 面 只 能 有 一 个 ; 当 页 面 中 存在 多 个 
OR | np et ht Fe 
无 法 完成 多 个 结果 同时 输出 

简化 写法 | 无 可 以 简写 成 $() 
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刚 开 始 学 习 jQuery, 经 常 分 不 清楚 哪些 是 jQuery 对 象 ,哪些 是 DOM 对 象 。 因 此 ,了 
解 jQuery 对 象 和 DOM 对 象 ,以 及 它们 之 间 的 关系 是 非常 必要 的 。 


8.3.1 jQuery 对 象 和 DOM 对 象 简介 


1. DOM 对 象 

DOM 是 Document Object Model, 即 文档 对 象 模型 的 缩写 。DOM 是 以 层次 结构 组 
织 的 节点 或 信息 片段 的 集合 ,每 一 份 DOM 都 可 以 表示 成 一 棵 树 。DOM 对 象 在 第 5 章 申 
已 经 有 过 详细 介绍 ,这 里 不 再 袭 述 。 下 面 构建 一 个 基本 的 网 页 ,网 页 代码 如 下 : 


U 





<html> 
< head> 
<title> DM 对 象 < /title> a 
i CNEB owebae oo ~ 
< - 一 
<h2> 宇宙 电子 经 营 宗旨 < /ho> 全 covz 
< 户 没 有 最 好 ,只 有 更 好 < /p> 宇宙 电子 经 营 宗旨 
< /body> 
< /hml> 没有 最 好 ， 只 有 更 好 
网 页 在 浏览 器 中 的 显示 效果 如 图 8-2 所 示 。 
可 以 把 上 面 的 HTML 结构 描述 为 一 棵 DOM 树 ， ”图 8-2 DOM 对 象 构建 网 页 
在 这 棵 DOM 树 中 ,二 h2>、<p 二 节点 都 是 DOM 元 素 的 的 页 面 显示 效果 

































我 100% ~ 
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节点 ,可 以 使 用 JavaScript 中 的 getElementById 或 getElementByTagName 来 获取 ,得 到 的 元 素 
就 是 DOM 对 象 。 
DOM 对 象 可 以 使 用 JavaScript 中 的 方法 。 例 如 : 


Var danObject= document .getElementById ("id"); 
Var html= aomcbject.innerHIML7 


2. jQuery 对 象 


jQuery 对 象 就 是 通过 jQuery 包装 DOM 对 象 后 产生 的 对 象 。jQuery 对 象 是 独 有 
的 ,可 以 使 用 jQuery 里 的 方法 。 例 如 : 

$ (4 sanrple") -htm (); // 获 取 认为 sarple 的 元 素 内 的 htm 代码 

这 段 代码 等 同 于 ， 

Gocument .getElementById ("sanple") .innerHIML7 

虽然 jQuery 对 象 是 包装 DOM 对 象 后 产生 的 ,但 是 jQuery 无 法 使 用 DOM 对象 的 任 
何方 法 , 同 理 DOM 对 象 也 不 能 使 用 jQuery 的 方法 。 

诸如 $ ("# sample"). innerHTML document. getElementById("sample"). html() 
之 类 的 写法 都 是 错误 的 。 


3. jQuery 对 象 和 DOM 对 象 的 对 比 
jQuery 对 象 不 同 于 DOM 对 象 ,但 在 实际 使 用 时 经 常 被 混淆 。DOM 对 象 是 通用 的 


既 可 以 在 jQuery 程序 中 使 用 ,也 可 以 在 标准 JavaScript 程序 中 使 用 。 例 如 ,在 JavaScript 
程序 中 根据 HTML 元 素 id 获取 对 应 的 DOM 对 象 的 方法 如 下 : 

var domcbj= document .getElementById ("id"); 

而 jQuery 对 象 来 自 jQuery 类 库 , 只 能 在 jQuery 程序 中 使 用 ,只 有 jQuery 对 象 才能 
引用 jQuery 类 库 中 定义 的 方法 。 因 此 ,应 该 尽 可 能 在 jQuery 程序 中 使 用 jQuery 对 象 ， 
这 样 才能 充分 发 挥 jQuery 类 库 的 优势 。 通 过 jQuery 的 选择 器 $ () 可 以 获得 HTML 元 
素 获取 对 应 的 jQuery 对 象 。 例 如 ,根据 HTML 元 素 id 获取 对 应 的 jQuery 对 象 的 方法 
如 下 : 

Var jbj=$ (#1d"); 


需要 注意 的 是 ,使 用 document. getElementById("id") 得 到 的 是 DOM 对 象 ,而 用 
#id 作 为 选择 符 取 得 的 是 jQuery 对 象 ,这 两 者 并 不 是 等 价 的 。 


8.3.2 jQuery 对 象 和 DOM 对 象 的 相互 转换 
既然 jQuery 对 象 科 DOM 对 象 有 区 别 也 有 联系 ,那么 jQuery 对 象 与 DOM 对 象 也 可 


以 相互 转换 。 在 两 者 转换 之 前 首先 约定 好 定义 变量 的 风格 。 如 果 获 取 的 是 jQuery 对 象 ， 
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则 在 变量 前 面 加 上 $ ,例如 : 
var Sabj=jouery 对 象 ; 
如 果 获 取 的 是 DOM 对 象 , 则 与 用 户 平时 习惯 的 表示 方法 一 样 。 
var dbj= DM 对 象 ; 
1. jQuery 对 象 转换 成 DOM 对 象 
jQuery 提供 了 两 种 转换 方式 将 一 个 jQuery 对 象 转换 成 DOM 对 象 : Lindex] 和 get 


(Cindex) 。 
(1) jQuery 对 象 是 一 个 类 似 数 组 的 对 象 , 可 以 通过 [Lindex] 的 方法 得 到 相应 的 DOM 
对 象 。 例 如 : 


Var $mr=$ ("#mr"); //jQery 对象 
Var mr= $mr[0] ; //pM 对 象 
alert (mr .value); // 获 取 DoM 元 素 的 value 的 值 并 弹出 


(2) jQuery 本 身 也 提供 get(index) 方 法 ,可 以 得 到 相应 的 DOM 对 象 。 例 如 : 


Var $mr=$ ("#mr"); //jouery 对 象 
Var mr= $mr .get (0); //poM 对 象 
alert (mr .value); // 获 取 pM 元 素 的 value 的 值 并 弹出 


2. DOM 对 象 转换 成 jQuery 对 象 


对 于 一 个 DOM 对 象 ,只 需要 用 $ () 把 它 包 装 起 来 ,就 可 以 得 到 一 个 jQuery 对 象 了 。 
即 $ (DOM 对 象 )。 例 如 : 


Var mr= document.getElementById ("mr"); //DOM 对 象 
Var $mr=$ (mr); //jouery 对 象 
alert ($ (mr) .val ()); // 获 取 文 本 框 的 值 并 弹出 


转换 后 ,DOM 对 象 就 可 以 任意 使 用 jQuery 中 的 方法 。 

通过 以 上 方法 ,可 以 任意 实现 DOM 对 象 和 jQuery 对 象 之 间 的 转换 。 需 要 特别 声明 
的 是 ,DOM 对 象 才能 使 用 DOM 中 的 方法 ,jQuery 对 象 是 不 可 以 使 用 DOM 中 的 方法 的 。 

【 例 8-2】 DOM 对 象 转换 成 jQuery 对 象 。 本 例 页 面 加 载 后 ,首先 使 用 DOM 对 象 的 
方法 弹出 p 节点 的 内 容 , 之 后 将 DOM 对 象 转换 为 jQuery 对 象 , 同 样 再 弹出 p 节点 的 内 
容 。 本 例文 件 8-2. html 在 浏览 器 中 的 显示 效果 如 图 8-3 所 示 。 

代码 如 下 : 


< ldoctype html> 
<html> 
<head> 
<title> DIM 对 象 转换 成 jQuery 对 象 < /title> 
< script src= "js/jquery- 3.2.1.min.js" typer "text/javascript"> 
< /script> 
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所 | Di\web\ch8\8-2.html PpP-ox|n oy 
谨 poM 对 和 转交 确 Quenzd 银 x| | 


宇宙 电子 经 营 宗旨 
没有 最 好 ， 只 有 更 好 




































[Spowseemamaueyna x | 
,宇宙 电子 经 营 宗旨 
| 没有 最 好 ， 只 有 更 好 


wm" x) 





8-3 例 8-2 的 页 面 显 示 效 果 








< script> 
$ (Gocument) .ready (function() { 
Var domcbj= document .getElementById ("nodep"); 
alert(" 使 用 DoM 方 法 获取 pp 节点 的 内 容 : "+ dmcbj.innerHTMD) 
Var $jqueryObj= $ (domcbj); 
alert(" 使 用 jQuery 方法 获取 p 节 点 的 内 容 : "+ $jquerycbj .html 0)7 
» 
</script> 
< /head> 
<body> 
<h2> 宇 宙 电 子 经 营 宗旨 < /> 
<p ij 中 "nodep"> 没 有 最 好 ,只 有 更 好 < /p> 
< /body> 
< /html> 


【 例 8-3】 jQuery 对 象 转换 成 DOM 对 象 。 本 例 页 面 加 载 后 ,首先 获取 2 个 jQuery 
对 象 ,使 用 jQuery 对 象 的 方法 分 别 弹 出 2 个 p 节点 的 内 容 , 之 后 将 jQuery 对 象 转换 为 
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DOM 对 象 ,同样 再 弹出 2 次 p 节点 的 内 容 。 本 例文 件 8-3. html 在 浏览 器 中 的 显示 效果 


如 图 8-4 所 示 。 
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图 8-4 例 8-3 的 页 面 显示 效果 


代码 如 下 : 


< !doctype html> 
<html> 
<head> 


<title> jQuery 对象 转 换 成 DM 对 象 < /title> 
< script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> 


< /script> 
< script> 
$ (document) .ready (function() { 
Var $jQueryObj=$ ("# nodep"); 


alert(" 使 用 jQuery 方法 获取 第 一 个 p 节 点 的 内 容 : "+ $jQuerycbj html 0)); 


Var $jQueryObj]= $ ("4 nodep1"); 


alert(" 使 用 jQuery 方法 获取 第 二 个 p 节 点 的 内 容 : "+ $joueryabjl.htbml ()); 


Var Ganobj= $joQuerycbj [0]; 


alert(" 使 用 poM 方 法 获取 第 一 个 p 节 点 的 内 容 : "+ denCbj .innerHIMD); 


Var dcomcbj]= $JjQueryGbj1.get (0); 


alert(" 使 用 poM 方 法 获取 第 二 个 p 节 点 的 内 容 : adomcbjl.innerHrTMD); 


D 
< /script> 
< /head> 
<body> 
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<h2> 宇 宙 电 子 经 营 宗旨 < /b> 
<p ic "nodep"> 没 有 最 好 ,只 有 更 好 < /p> 
<p ic "nodep1"> 一 握 宇宙 手 ,永远 是 朋友 < /p> 
< /body> 
</htm> 


84 jQuery 的 插件 


jQuery 是 一 个 轻 量 级 JavaScript 库 ,虽然 它 非常 便捷 且 功 能 强大 ,但 是 还 是 不 可 能 满 
足 所 有 用 户 的 所 有 需求 。 而 作为 一 个 开源 项 目 , 所 有 用 户 都 可 以 看 到 jQuery 的 源 代码 ， 
很 多 人 都 希望 共享 自己 日 常 工作 积累 的 功能 。jQuery 的 插件 机 制 使 这 种 想法 成 为 现实 。 
可 以 把 自己 的 代码 制作 成 jQuery 插件 , 供 其 他 人 引用 。 插 件 机 制 大 大 增强 了 jQuery 的 
可 扩展 性 ,扩充 了 jQuery 的 功能 。 

本 节 介 绍 引用 jQuery 插件 的 方法 ,然后 介绍 一 些 很 实用 的 jQuery 插件 。 


8.4.1 引用 jQuery 插件 的 方法 


引用 jQuery 插件 的 方法 比较 简单 ,首先 将 要 使 用 的 插件 下 载 到 本 地 计算 机 中 ,然后 
按照 下 面 的 步骤 操作 ,就 可 以 使 用 插件 实现 想 要 的 效果 。 

(1) 把 下 载 的 插件 包含 到 二 head 二 标签 内 ,并 确保 它 位 于 主 jQuery 源 文件 (jquery- 
3:2.1.mian,j) 之 局 i 

(2) 包含 一 个 自 定义 的 JavaScript 文件 ,并 在 其 中 使 用 插件 创建 或 扩展 的 方法 。 代 
码 如 下 : 


<head> 
< script src= "js/jqvery- 3.2.1.min.js" type= "text/javascript"> 
< script src= "js/jquery.effect.js" type= "text/javascript"> < /script> 
< script src= "js/jquery.overlay.min.js" type= "text/javascript"> < /script> 
< head> 
需要 说 明 的 是 ,建议 将 下 载 的 jQuery 插件 的 文件 名 命名 为 jquery. [插件 名 ].js,' 以 免 
和 其 他 js 库 插件 混淆 。 


8.4.2 常用 的 插件 简介 


在 jQuery 官方 网 站 中 .有 一 个 插件 超 链 接 , 单 击 该 超 链 接 , 将 进入 jQuery 的 插件 分 
类 列表 页 面 (http://plugins. jquery. comy/) ,如 图 8-5 所 示 。 在 该 页 面 中 , 单 击 分 类 名 称 ， 
可 以 查看 每 个 分 类 下 的 插件 概要 信息 及 下 载 超 链 接 。 用 户 也 可 以 在 上 面 的 搜索 (Search) 
文本 框 中 输入 指定 的 插件 名 称 ,搜索 所 需 插件 。 

从 图 8-5 可 以 看 出 ,常用 的 jQuery 的 插件 类 别 包 括 UI 插件 、 表 单 插件 .幻灯 片 插件 、 
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必 JQueryY 


write less, do more. 


The jQuery Plugin Registry 





The jQuery Plugin Registry is in read-only mode. 
New plugin releases will not be processed. 








图 8-5 ”jQuery 的 插件 分 类 列表 页 面 
滚动 插件 .图 像 插 件 .图 表 插件 ,布局 插件 和 文字 处 理 插 件 等 。 下 面 简要 介绍 几 个 流行 的 
插件 。 
1. flexslider 幻灯 片 轮 显 插件 


使 用 jQuery 的 flexslider 幻灯 片 轮 显 插件 可 以 实现 如 图 8-6 所 示 的 图 片 轮 显效 果 。 
当 页 面 加 载 时 ,轮流 显示 多 张 图 片 ,用 户 也 可 以 单 击 下 方 的 链接 手动 切换 需要 显示 的 
图 片 。 
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UniDigital 宇宙 电子 江 sme 


我 们 始终 


将 产品 质量 放 在 第 一 位 











fleV//DvVdie/ 短 100% ~ 





图 8-6 flexslider 幻灯 片 轮 显 插件 


2. mousewheel 滚动 显示 插件 


使 用 jQuery 的 mousewheel 滚动 显示 插件 可 以 实现 如 图 8-7 所 示 的 新 闻 内 容 滚动 显 
213 


Web 前 端 开发 实例 教程 一 HIM 5+ JavaScript + jQuery 


示 效 果 。 当 新 闻 列 表 项 较 多 时 ,可 以 使 用 该 插件 实现 滚动 显示 新 闻 列 表 项 。 








| 新 闻 动 态 更 多 新 闻 | 新 闻 动 态 更 多 新 闻 
2017-10-13 2017-10-13 
主 亩 电子 有 限 公司 获得 开封 开发 区 百 强 企 放 宙 电子 将 亮 信 在 "深圳 会 时 中 心 "举办 
业 荣 省 称号 的 "2017 深 圳 国际 电子 展 …。 
201710-1 | | :man 
放 南 电子 将 作为 知名 半导体 制造 商 ， 通过 闻 雷 电子 开发 出 业界 最 小 低 消 寿 电 流 的 六 
支持 各 种 电机 应 用 的 高 效 化 、 变 频 化 不 轩 加 速度 陀螺 仪 组 合 传 感 
断 为 降低 功 耗 贡献 力量 器 "KXG07*、*KXG08" 上 
2017-10-13 2017-10-13 
二 十 电子 将 亮相 在 "深圳 会 展 中 心 "学 办 二 雷电 子 有 限 公司 获得 开封 开发 区 百 强 企 
的 "2017 深 圳 国际 电子 展 …。 业 荣 党 称号 
2017-10-13 17-10-13 

















图 8-7 mousewheel 滚动 显示 插件 


3. prefixfree 3D 旋转 插件 
使 用 jQuery 的 prefixfree 3D 旋转 插件 可 以 实现 如 图 8-8 所 示 的 3D 旋转 图 片 相 册 的 
显示 效果 。 


3D 旋 转 图 片 相册 3D 旋 转 图 片 相册 


将 并 | 
了 | 


图 8-8 ”prefixfree 3D 旋转 插件 





4. blueimp 视频 播放 插件 


使 用 jQuery 的 blueimp 视频 播放 插件 可 以 实现 如 图 8-9 所 示 的 视频 选择 与 播放 的 效 
果 。 用 户 可 以 单 击 左右 箭头 选择 要 播放 的 视频 ,选择 视频 后 单 击 中 间 的 播放 按钮 开始 播放 。 





站 下 





图 8-9 ”blueimp 视频 播放 插件 
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第 8 章 。 jQuery 基础 
jQuery 插件 种 类 繁多 ,由 于 篇 幅 所 限 , 不 再 一 一 列举 ,读者 可 以 下 载 相 关 的 插件 , 练 
习 如 何 使 用 jQuery 插件 。 





习 是 


1. jQuery 3. x 版 本 相对 于 jQuery 1. x 的 最 大 区 别 是 什么 ? 

2. 简 述 HTML 页 面 中 引入 jQuery 库 文件 的 方法 。 

3. 简 述 DOM 对 象 和 jQuery 对 象 的 区 别 。 

4. 如 何 将 jQuery 对 象 转换 成 DOM 对 象 ? 

5. 在 网 页 中 使 用 p 元 素 定 义 了 一 个 字符 串 “ 单 击 我 ,我 就 会 消失 。”, 然 后 通过 jQuery 
编程 实现 单 击 p 元 素 时 隐藏 p 元 素 ,如 图 8-10 所 示 。 


旧 ] DAwebvchs\ 习 是 wx PD- OX 9 - 全 pxwebvchg\ 习 是 wx DD- OX 
局 Dxweb\ch8\ 习 题 wd8-5.ht… x 优 D\web\chg\ 习 是 wdt8-5.ht. x 


















































单 击 我 ,我 就 会 消失 。 N 








图 8-10 题 5 图 


6. 下 载 jQuery 插件 ,实现 如 图 8-11 所 示 的 5 种 幻灯 片 切换 效果 。 


ES 
er 




















图 8-11 题 6 图 
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第 9 章 jQuery 选择 器 


选择 器 是 jQuery 强大 功能 的 基础 ,在 jQuery 中 ,对 事件 处 理 . 遍历 DOM 和 Ajax 操 
作 都 依赖 于 选择 器 。 它 完全 继承 了 CSS 的 风格 ,编写 和 使 用 异常 简单 。 如 果 能 熟练 掌握 
jQuery 选择 器 ,不 仅 能 简化 程序 代码 ,而且 可 以 达到 事半功倍 的 效果 。 


91 jQuery 选择 器 简介 
在 介绍 jQuery 选择 器 之 前 , 先 来 介绍 jQuery 的 工厂 函数 “$”。 


9.1.1 jQuery 的 工厂 函数 


在 jQuery 中 ,无 论 使 用 哪 种 类 型 的 选择 符 都 需要 从 一 个 “$ ”符号 和 一 对 “()” 开 始 。 
在 “()” 中 通常 使 用 字符 串 参 数 , 参 数 中 可 以 包含 任何 CSS 选择 符 表达 式 。 

下 面 介 绍 几 种 比较 常见 的 用 法 。 

(1) 在 参数 中 使 用 标记 名 。 例 如 , $ ("div") 用 于 获取 文档 中 全 部 的 二 div 二 。 

(2) 在 参数 中 使 用 ID。 例如, $("#username") 用 于 获取 文档 中 ID 属性 值 为 
username 的 一 个 元 素 。 

(3) 在 参数 中 使 用 CSS 类 名 。 例 如 ,，$(". btn_grey") 用 于 获取 文档 中 使 用 CSS 类 名 
为 btn_grey 的 所 有 元 素 。 


9.1.2 什么 是 jQuery 选择 器 


在 页 面 中 要 为 某 个 元 素 添加 属性 或 事件 时 ,第 一 步 必 须 先 准确 找到 这 个 元 素 , 在 
jQuery 中 可 以 通过 选择 器 来 实现 这 一 重要 功能 。jQuery 选择 器 是 jQuery 库 中 非常 重要 
的 部 分 之 一 , 它 支 持 网 页 开发 者 所 熟知 的 CSS 语法 ,能 够 轻松 快速 地 对 页 面 进行 设置 。 
一 个 典型 的 jQuery 选择 器 的 语法 格式 如 下 : 


$ (selector) .methodName (); 


其 中 ,selector 是 一 个 字符 串 表达 式 , 用 于 识别 DOM 中 的 元 素 , 然 后 使 用 jQuery 提 
供 的 方法 集合 加 以 设置 。 
多 个 jQuery 操作 可 以 以 链 的 形式 串 起 来 ,语法 格式 如 下 : 





| 





$ (selector) -methodl () method2 () method307 
例如 ,要 隐藏 id 为 test 的 DOM 元 素 ,并 为 它 添 加 名 为 content 的 样式 ,实现 如 下 : 


$("#test') .hige() .adaclass('content')7 


9.1.3 jQuery 选择 器 的 优势 


与 传统 的 JavaScript 获取 页 面 元 素 和 编写 事件 处 理 程序 相 比 ,jQuery 选择 器 有 明显 
的 优势 ,具体 表现 在 以 下 3 个 方面 。 


1， 代码 更 简单 


在 jQuery 库 中 封装 了 大 量 可 以 直接 通过 选择 器 调用 的 方法 或 函数 ,使 我 们 仅 使 用 简 
单 的 几 行 代码 就 可 以 实现 比较 复杂 的 功能 。 

例如 ,可 以 使 用 $ ('# id 代替 JavaScript 代码 中 的 document. getElementById() 函 
数 , 即 通过 id 来 获取 元 素 ; 使 用 $('tagName" 代替 JavaScript 代码 中 的 document. 
getElementsByTagName() 函 数 , 即 通过 标签 名 称 获 取 HTML 元 素 等 。 


2. 支持 CSS 1 到 CSS 3 选择 器 


jQuery 选择 器 支持 CSS 1、CSS 2 的 全 部 和 CSS 3 几乎 所 有 的 选择 器 ,以 及 jQuery 
独创 的 高 级 且 复 杂 的 选择 器 ,有 一 定 CSS 经 验 的 开发 人 员 可 以 很 容易 地 切入 jQuery 的 
学 习 中 。 

一 般 来 说 ,使 用 CSS 选择 器 时 ,开发 人 员 需 要 考虑 主流 的 浏览 器 是 否 支持 某 些 选 择 
器 。 但 在 jQuery 中 ,开发 人 员 则 可 以 放心 地 使 用 jQuery 选择 器 ,无 须 考虑 浏览 器 是 否 支 
持 这 些 选择 器 ,这 极 大 地 方便 了 开发 者 。 


3. 完善 的 检测 机 制 


在 传统 的 JavaScript 代码 中 ,给 页 面 中 的 元 素 设 定 某 个 事务 时 必须 先 找到 该 元 素 , 然 
后 赋予 相应 的 事件 或 属性 ;如 果 该 元 素 在 页 面 中 不 存在 或 已 被 删除 ,那么 浏览 器 会 提示 运 
行 出 错 之 后 的 信息 ,这 会 影响 以 后 代码 的 执行 。 因 此 ,为 避免 显示 这 样 的 出 错 信息 ,通常 
要 先 检测 该 元 素 是 否 存在 ,如 果 存 在 ,再 执行 它 的 属性 或 事件 代码 。 例 如 : 

< 户 测试 页 面 < /E> 

< Script type= "text/javascript"> 

alert (Gocument .getElementById ("test") .value); 

< /script> 

运行 以 上 代码 ,浏览 器 就 会 报错 ,原因 是 网 页 中 没有 id 为 "test" 的 元 素 。 

将 以 上 代码 改进 为 如 下 形式 。 

< 户 测试 页 面 < /> 

< script type= "text/javascript"> 
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if (document .getElementById ("test")) { 
alert (document.getElementByTd ("test") -value)7 
} 
< /script> 
这 样 就 可 以 避免 浏览 器 报错 。 如 果 要 操作 的 元 素 很 多 ,用 户 需 要 做 大 量 重复 的 工作 
对 每 个 元 素 进行 判断 ,这 无 疑 会 使 开发 人 员 感 到 烦琐 。 而 jQuery 在 这 方面 的 处 理 是 非常 
好 的 ,即使 用 jQuery 获取 网 页 中 不 存在 的 元 素 也 不 会 报错 ,看 下 面 的 例子 ,代码 如 下 : 
< 户 测 试 页 面 < /p> 
< script type= "text/javascript"> 
alert ($ (# test") .val ()); // 无 须 判 断 $ ( 叶 test") 是 否 存在 
< /script> 
有 了 jQuery 的 这 个 防护 措施 ,即使 以 后 用 户 因为 某 种 原因 删除 了 网 页 上 曾经 使 用 过 
的 元 素 , 也 不 用 担心 网 页 的 JavaScript 代码 会 报错 。 
jQuery 选择 器 完全 继承 了 CSS 选择 器 的 风格 ,将 jQuery 选择 器 分 为 四 类 : 基础 选 
择 器 ,层次 选择 器 、 过 滤 选 择 器 和 表单 选择 器 。 


92 基础 选择 器 


基础 选择 器 是 jQuery 中 最 常用 的 选择 器 ,通过 元 素 的 id、className 或 tagName 来 
查找 页 面 中 的 元 素 , 见 表 9-1。 























表 9-1 基础 选择 器 
选 择 器 描 述 返 回 
#1ID 根据 元 素 的 ID 属性 进行 匹配 单个 jQuery 对 象 
element 根据 元 素 的 标签 名 进行 匹配 jQuery 对 象 数组 
. class 根据 元 素 的 class 属性 进行 匹配 jQuery 对 象 数组 
selectorl ,selector2,. .. ,selectorN| 将 每 个 选择 器 匹配 的 结果 合并 后 一 起 返回 jQuery 对 象 数组 
类 匹配 页 面 的 所 有 元 素 , 包 括 html、head、body 等 | jQuery 对 象 数组 


9.2.1 ID 选择 器 


每 个 HTML 元 素 都 有 一 个 id, 可 以 根据 id 选取 对 应 的 HTML 元 素 。ID 选择 器 #id 
就 是 利用 HTML 元 素 的 id 属性 值 来 筛选 匹配 的 元 素 , 并 以 jQuery 包装 集 的 形式 返回 给 
对 象 。 这 就 好 像 在 单位 中 每 个 职工 都 有 自己 的 工 号 一 样 ,职工 的 姓名 是 可 以 重复 的 ,但 是 
工 号 却 是 不 能 重复 的 ,因此 根据 工 号 就 可 以 获取 指定 职工 的 信息 。 

ID 选择 器 的 使 用 方法 如 下 : 





$ ("id"); 
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第 9 章 jQuery 选择 器 
其 中 ,id 为 要 查询 元 素 的 ID 属性 值 。 例 如 ,要 查询 ID 属性 值 为 test 的 元 素 , 可 以 使 用 下 
面 的 jQuery 代码 。 





$( 啡 test")7 


需要 注意 的 是 ,如 果 页 面 中 出 现 了 两 个 相同 的 id 属性 值 ,程序 运行 时 页 面 会 报 出 JS 
运行 错误 的 对 话 框 , 所 以 在 页 面 中 设置 id 属性 值 时 要 确保 该 属性 值 在 页 面 中 是 唯一 的 。 

【 例 9-1】 在 页 面 中 添加 一 个 ID 属性 值 为 test 的 文本 框 和 一 个 按钮 ,通过 单 击 按钮 
来 获取 在 文本 框 中 输入 的 值 ,本 例文 件 9-1. html 在 浏览 器 中 的 显示 效果 如 图 9-1 所 示 。 





~ 
祭司 SD DNweb\ch9\9-Lhtml 甩 ~GX| 
| @ IDi 蝇 的 示例 x 


请 输入 内 容 : 


























宇宙 电子 ， 天 天 向 上 [第 入 的 值 为 





图 9-1 例 9-1 的 页 面 显示 效果 


代码 如 下 : 


<html> 
<head> 
<title> ID 选择 器 的 示例 < /title> 
< script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> 
< /script> 
< script type= "text/javascript"> 
$ (Gopcument) .ready (function() { 


/为 按钮 绑 定单 击 事件 
$ ("input [type= "button']") .click (function() { 
Var inputValue=$ (# test") -val (); // 获 取 文 本 框 的 值 


alert (inputValue); 


< /script> 
< /head> 
<body> 
<h3> 请 输入 内 容 : < /hb3> 
< input type= "text" id "test" name= "test" value= /> 
<input type= "button" value= 哈 入 的 值 为 "/> 
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【说 明 】 

(1) ID 选择 器 是 以 “#id” 的 形式 获取 对 象 的 ,在 这 段 代 码 中 用 $("# testInput") 获 
取 了 一 个 id 属性 值 为 testInput 的 jQuery 包装 集 ,然后 调用 包装 集 的 val() 方 法 取得 文本 
输入 框 的 值 。 

(2) 代码 $("inputLtype 一 "buttonJ]") 使 用 了 jQuery 中 的 属性 选择 器 匹配 文档 中 的 
按钮 ,关于 属性 选择 器 的 用 法 本 章 后 续 内 容 将 会 讲解 。 


9.2.2 元 素 选 择 器 


元 素 选择 器 是 根据 元 素 名 称 匹 配 相应 的 元 素 。 元 素 选择 器 指向 的 是 DOM 元 素 的 标 
记名 , 即 元 素 选 择 器 是 根据 元 素 的 标记 名 选择 的 。 可 以 把 元 素 的 标记 名 理解 成 职工 的 姓 
名 ,在 一 个 单位 中 可 能 有 多 个 姓名 为 “ 张 三 ” 的 职工 ,但 是 姓名 为 “ 王 小 虎 ”的 职工 也 许 只 有 
一 个 ,因此 通过 元 素 选择 器 匹配 到 的 元 素 是 可 能 有 多 个 的 ,也 可 能 只 有 一 个 。 多 数 情况 
下 ,元 素 选择 器 匹配 的 是 一 组 元 素 。 

元 素 选择 器 的 使 用 方法 如 下 : 

$ ("element"); 

其 中 ,element 是 要 获取 的 元 素 的 标记 名 。 例 如 ,要 获取 全 部 p 元 素 , 可 以 使 用 下 面 
的 jQuery 代码 。 

$ ("Pp"); 

【 例 9-2】 在 页 面 中 添加 两 个 二 div 二 标记 和 一 个 按钮 ,通过 单 击 按钮 来 获取 这 两 个 
二 div 记 ,并 交换 它们 的 内 容 , 本 例文 件 9-2. html 在 浏览 器 中 的 显示 效果 如 图 9-2 所 示 。 


Dw -cx 全 全 Dwebvhoo2hm PD-cx) 
各 元 章 迁 玛 莉 地 全 a = " 


乾坤 大 挪移 乾坤 大 挪移 


入 COB 
是 1 色 
才 
这 是 一 个 机 器 人 机 器 人 变 成 了 导航 仪 
EGR 人 站 
a 
2 
这 是 一 个 导航 仪 导航 仪 变 成 了 机 器 人 
于 


所 100% 起 100% ~ 


















































图 9-2 单 击 按钮 交换 二 div 之 的 内 容 
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代码 如 下 : 


<htm> 
<head> 
<title> 元 素 选 择 器 示例 < /title> 
< style type= "text/css"> 
imgf 
border: lpx solid #00f; 
} 
div{ 
Paading: Spx; 
} 
< /style> 
< script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> 
</script> 
< script type= "text/javascript"> 
$ (document) .ready (function() { 
$ (#button") .click (function() { /为 按钮 绑 定 单 击 事件 
// 获 取 第 一 个 div 元 素 
$ ("div") .eq(0) .htbml ("< img src= "images/02.jpg' 放 机 器 人 变 成 了 导航 仪 "); 
// 获 取 第 二 个 div 元 素 
$ (div") .get (1) .innerHIM= "< img srcr "imeges/01.jpg'/> 导 航 仪 变 成 了 机 器 人 "; 
D; 
Ds; 
< /script> 
< /head> 
<body> 
<h3> 乾 坤 大 挪移 < /h3> 
<div>< img src= "images/01.jpg"/> 这 是 一 个 机 器 人 < /div> 
<div> < img src= "images/02.jpg"/> 这 是 一 个 导航 仪 < /div> 
< input type= "button" id "button" value= "变脸 " /> 
< /pody> 
< /html> 


【说 明 】 
(1) 在 上 面 的 代码 中 ,使 用 元 素 选择 器 获取 了 一 组 div 元 素 的 jQuery 包装 集 , 它 是 一 


组 Object 对 象 ,存储 方式 为 LObject Object] ,但 是 这 种 方式 并 不 能 显示 出 单独 元 素 的 文 
本 信息 ,需要 通过 索引 器 来 确定 要 选取 哪个 div 元 素 , 在 这 里 分 别 使 用 了 两 个 不 同 的 索引 
器 eq() 和 get()。 这 里 的 索引 器 类 似 于 房间 的 门牌 号 ,所 不 同 的 是 ,门牌 号 是 从 1 开始 计 
数 的 ,而 索引 器 是 从 0 开始 计数 的 。 


(2) 本 实例 中 使 用 了 两 种 方法 设置 元 素 的 文本 内 容 ,html() 方 法 是 jQuery 的 方法 ， 


innerHTML 方法 是 DOM 对 象 的 方法 。 这 里 使 用 了 $ (document). ready() 方 法 , 当 页 面 
元 素 载 入 就绪 时 就 会 自动 执行 程序 ,自动 为 按钮 绑 定单 击 事件 。 


(3) edq() 方 法 返回 的 是 一 个 jQuery 包装 集 , 所 以 它 只 能 调用 jQuery 的 方法 ,而 get() 


方法 返回 的 是 一 个 DOM 对 象 , 所 以 它 只 能 用 DOM 对 象 的 方法 。eq() 方 法 与 get() 方 法 
默认 都 是 从 0 开始 计数 , $ ("#test"). get(0) 等 效 于 $("#test")[0]。 
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9.2.3 类 名 选择 器 


类 名 选择 器 是 通过 元 素 拥有 的 CSS 类 的 名 称 查找 匹配 的 DOM 元 素 。 在 一 个 页 面 
中 ,一 个 元 素 可 以 有 多 个 CSS 类 ,一 个 CSS 类 又 可 以 匹配 多 个 元 素 ,如 果 元 素 中 有 一 个 匹 
配 的 类 的 名 称 就 可 以 被 类 名 选择 器 选取 到 。 简 单 地 说 类 名 选择 器 就 是 以 元 素 具 有 的 CSS 








类 名 称 查找 匹配 的 元 素 。 
类 名 选择 器 的 使 用 方法 如 下 : 
$(".class"); 
其 中 ,class 为 要 查询 元 素 所 用 的 CSS 类 名 。 例 如 ,要 查询 使 用 CSS 类 名 为 digital 的 
元 素 , 可 以 使 用 下 面 的 jQuery 代码 。 f = 
[Fe 区 习 
$ (digitalm 3 全 空 多 

















【 例 9-3】〗 在 页 面 中 添加 两 个 过 div 之 标 
记 , 并 为 其 中 的 一 个 设置 CSS 类 ,然后 通过 
jQuery 的 类 名 选择 器 选取 设置 了 CSS 类 的 默认 样式 
到 div 过 标记 ,并 设置 其 CSS 样式 ,本 例文 
件 9-3. html 在 浏览 器 中 的 显示 效果 如 图 9-3 


通过 类 名 选择 器 设置 CSS 类 的 div 标 记 


























所 示 。 新 的 样式 
代码 如 下 ， 
<html> 
<head> 
<title> 类 名 选择 器 示例 < /title> i 
< style type= "text/css"> = 
i 图 9-3 例 9-3 的 页 面 显示 效果 


border: lpx solid #003a75; 
background- color: #0oef; 
margin: Spx; 
height: 100px; 
width: 200px; 
padding: Spx; 
} 
</style> 
< script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> 
</script> 
< script type= "text/javascript"> 
$ (Gocument) .ready (functicn() { 


Var myClass= $ (".myClass"); // 选 取 元 素 
myClass.css ("background— color™, "# c50210"); // 为 选取 的 元 素 设置 背景 颜色 
myClass.css ("color", "fffF"); // 为 选取 的 元 素 设置 文字 颜色 
Ds; 
< /script> 


222 





</head> 
<body> 
<h3> 通 过 类 名 选择 器 设置 css 类 的 div 标 记 < /bh3> 
<diw> 上 默认 样式 < /div> 
<div class= "myclass"> 新 的 样式 < /div> 
< /body> 
</htm> 


【说 明 】 在 上 面 的 代码 中 ,只 为 其 中 的 一 个 过 div 之 标记 设置 了 CSS 类 名 称 , 但 是 由 
于 程序 中 并 没有 名 称 为 myClass 的 CSS 类 ,所 以 这 个 类 是 没有 任何 属性 的 。 类 名 选择 器 


将 返回 一 个 名 为 myClass 的 jQuery 包装 集 , 利 用 css() 方 法 可 以 为 对 应 的 div 元 素 设 定 
CSS 属性 值 , 这 里 将 元 素 的 背景 颜色 设置 为 深 红色 ,文字 颜色 设置 为 白色 。 





9.2.4 复合 选择 器 


合 选择 器 将 多 个 选择 器 (可 以 是 ID 选择 器 .元素 选择 或 是 类 名 选择 器 ) 组 合 在 一 
起 ,两 个 选择 器 之 间 以 逗号 *, ”分隔 , 只 要 符合 其 中 的 任何 一 个 筛选 条 件 就 会 被 匹配 ,返回 
的 是 一 个 集合 形式 的 jQuery 包装 集 , 利用 jQuery 索引 器 可 以 取得 集合 中 的 jQuery 
对 象 。 
需要 注意 的 是 ,多 种 匹配 条 件 的 选择 器 并 不 是 匹配 同时 满足 这 几 个 选择 器 的 匹配 条 
件 的 元 素 ,而 是 将 每 个 选择 器 匹配 的 元 素 合并 后 一 起 返回 。 
复合 选择 器 的 使 用 方法 如 下 : 
$ (" selectorl, selector2, selectorN"); 
参数 说 明 如 下 。 
。 selectorl: 一 个 有 效 的 选择 器 ,可 以 是 ID 选择 器 .元素 选择 器 或 是 类 名 选择 器 等 。 
。 selector2: 另 一 个 有 效 的 选择 器 ,可 以 是 ID 选择 器 .元素 选择 器 或 是 类 名 选择 
器 等 。 
。 selectorN : 任意 多 个 选择 器 ,可 以 是 ID 选择 器 .元素 选 择 器 或 是 类 名 选择 器 等 。 
例如 ,要 查询 页 面 中 的 全 部 二 p 二 标记 和 使 用 CSS 类 test 的 二 div 过 标记 ,可 以 使 用 
下 面 的 jQuery 代码 。 


$ ("pdiv.test"); 


【 例 9-4】 在 页 面 中 添加 3 种 不 同 元 素 并 统一 设置 样式 。 使 用 复合 选择 器 筛选 id 属 
性 值 为 span 的 元 素 和 过 div 之 元 素 , 并 为 它们 添加 新 的 样式 ,本 例文 件 9-4. html 在 浏览 器 
中 的 显示 效果 如 图 9-4 所 示 。 

代码 如 下 : 


<html> 
<head> 
<title> 复 合 选择 器 示例 < /title> 
< style type= "text/css"> 
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) DAweb\chg\9-4.html 
多 生 合 迁 冯 部 例 x 


通过 复合 选择 器 为 元 素 换 肤 

































































ID 为 span 的 元 素 


























图 9-4 单 击 按钮 为 元 素 换 外 观 


-Gefault{ 
border: lpx solid #003a75; 
background- color: yellow; 
margin: Spx; 
width: 120px; 
float: left; 
Padding: Spx; 
} 
.change{ 
background- color: #c50210; 
color: #fff; 
} 
</style> 
< script src="js/jquery- 3.2.1.min.js" type= "text/javascript"> 
< /script> 
< Script type= "text/javascript"> 
$ (Gocument) .ready (function() { 
$ ("input [type=button]") .click (function() { // 绑 定 按钮 的 单 击 事件 
$ (# span,div") .addclass ("change")7 // 添 加 所 使 用 的 css 类 
D; 
D; 
< /script> 
< /head> 
<body> 
<h3> 通 过 复合 选择 器 为 元 素 换 肤 < /h3> 
<p class= "default">p 元 素 < /p> 
< span class= "default" id "span"> ID 为 span 的 元 素 < /span> 
<div class= "default"> div 元 素 < /div> 
< input type= "button" value= 品 肤 " /> 
< /pody> 
< /hbnl> 


9.2.5 通配符 选择 器 


通配符 就 是 指 符号 * x* ”, 它 代表 着 页 面 上 的 每 一 个 元 素 , 也 是 说 如 果 使 用 $ (x ) 将 取 
得 页 面 上 所 有 的 DOM 元 素 集合 的 jQuery 包装 集 。 
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93 层次 选择 器 


jQuery 层次 选择 器 是 通过 DOM 对 象 的 层次 关系 来 获取 特定 的 元 素 , 如 同辈 元 素 、 后 
代 元 素 . 子 元 素 和 相 邻 元 素 等 。 层 次 选择 器 的 用 法 与 基础 选择 器 相似 ,也 是 使 用 $ () 函 数 
来 实现 ,返回 结果 均 为 jQuery 对 象 数组 , 见 表 9-2 。 


选 择 器 


表 9-2 层次 选择 器 
描述 


返 回 





$ ("ancestor descendant") 


选取 ancestor 元 素 中 的 所 有 的 子 元 素 


jQuery 对 象 数组 





$ ("parent>child") 


选取 parent 元 素 中 的 直接 子 元 素 


jQuery 对 象 数组 





$ ("prev+ next") 


选取 紧邻 prev 元 素 之 后 的 next 元 素 


jQuery 对 象 数组 





$ ("prev~siblings") 





选取 prev 元 素 之 后 的 siblings 兄弟 元 素 


9.3.1 ancestor descendant( 祖 先后 代 ) 选 择 器 


jQuery 对 象 数组 





ancestor descendant 选择 器 中 的 ancestor 代表 祖先 ,descendant 代表 子孙 ,用 于 在 给 
定 的 祖先 元 素 下 匹配 所 有 的 后 代 元 素 。ancestor descendant 选择 器 的 使 用 方法 如 下 : 


$ ("ancestor desoendant"); 


参数 说 明 如 下 。 


。 ancestor: 指 任何 有 效 的 选择 器 。 
。 descendant: 用 于 匹配 元 素 的 选择 器 ,并 且 它 是 ancestor 所 指定 元 素 的 后 代 元 素 。 
例如 ,要 匹配 div 元 素 下 的 全 部 img 元 素 , 可 以 使 用 下 面 的 jQuery 代码 。 


$ ("div img"); 


9.3.2 parent 之 child( 父 之 子 ) 选 择 器 


parent 二 child 选择 器 中 的 parent 代表 父 元 素 ,child 代表 子 元 素 , 用 于 在 给 定 的 父 元 
素 下 匹配 所 有 的 子 元 素 。 使 用 该 选择 器 只 能 选择 父 元 素 的 直接 子 元 素 。parent 二 child 


选择 器 的 使 用 方法 如 下 : 
$ ("parent> child"); 
参数 说 明 如 下 。 


。 parent: 指 任何 有 效 的 选择 器 。 
。 child: 用 于 匹配 元 素 的 选择 器 ,并 且 它 是 parent 元 素 的 子 元 素 。 
例如 ,要 匹配 表单 中 所 有 的 子 元 素 input, 可 以 使 用 下 面 的 jQuery 代码 。 
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$ ("fomp> input")7 


9.3.3 prev 十 next( 前 十 后 ) 选 择 器 


prev 十 next 选择 器 用 于 匹配 所 有 紧 接 在 prev 元 素 后 的 next 元 素 。 其 中 ,prev 和 
next 是 两 个 相同 级 别 的 元 素 。prev 十 next 选择 器 的 使 用 方法 如 下 : 


$ ("prevt+ next"); 
参数 说 明 如 下 。 
。 prev: 指 任何 有 效 的 选择 器 。 


。 next: 一 个 有 效 选择 器 并 紧 接着 prev 选择 器 。 
例如 ,要 匹配 过 div 过 标记 后 的 二 img 之 标记 ,可 以 使 用 下 面 的 jQuery 代码 。 


$ ("divt img"); 


9.3.4 prev 一 siblings( 前 ~ 兄弟) 选择 器 


prev~siblings 选择 器 用 于 匹配 prev 元 素 之 后 的 所 有 siblings 元 素 。 其 中 ,prev 和 
siblings 是 两 个 相同 辈 元 素 。prev 一 siblings 选择 器 的 使 用 方法 如 下 : 


$ (prevv siblings"); 


参数 说 明 如 下 。 

。 prev: 指 任何 有 效 的 选择 器 。 

。 siblings: 一 个 有 效 选择 器 并 紧 接 着 prev 选择 器 。 

例如 ,要 匹配 div 元 素 的 同辈 元 素 ul, 可 以 使 用 下 面 的 jQuery 代码 。 

$ ("div~ u1"); 

需要 注意 的 是 ,$ ("prev 十 next") 用 于 选取 紧 随 prev 元 素 之 后 的 next 元 素 , 且 prev 
元 素 和 next 元 素 有 共同 的 父 元 素 , 功 能 与 
$("prev"). next("next") 相 同 ;而 $("prev 一 
siblings") 用 于 选取 prev 元 素 之 后 的 siblings 
元 素 , 两 者 有 共同 的 父 元 素 而 不 必 紧 邻 ,功能 查询 条 件 
与 $$ ("prev"). nextAll("siblings") 相 同 。 用 户 名 : [El 

【 例 9-5】 层次 选择 器 示例 。 通 过 层次 | 宫 吧 CC | 
选择 器 分 别 对 子 元 素 、 直 接 子 元 素 、. 相 邻 兄 弟 身份 证 号 ， 一 
元 素 和 普通 兄弟 元 素 进 行 选 取 并 对 其 设置 样 联系 电话 ， IE 
式 , 本 例文 件 9-5. html 在 浏览 器 中 的 显示 效 
果 如 图 9-5 所 示 。 i 

代码 如 下 : 图 9-5 例 9-5 的 页 面 显示 效果 
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<title> 层 次 选择 器 示例 < /title> 
< script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
< /head> 


<div> 


查询 条 件 < input name= "search" /> 
<form> 
<label> 用 户 名 : </label> 
< input name= "useName" /> 
<fieldset> 
<labeD> 密 码 : < /label> 
< input name= "password" /> 
< /fieldset> 
< /fomm> 
<hr/> 
身份 证 号 : < input name= "none" /><br/> 
联系 电话 : < input name= "none" /> 


</div> 
< Script type= "text/javascript"> 


$ (function(e) { 
$ ("fomm input") .css ("width","200px"); // 第 一 个 文本 框 采 用 默认 样式 
$ ("fomm> input") .css ("background", "pink") ; 
// 第 二 个 文本 框 采 用 粉色 背景 
$ ("label+ input") .css ("border- color "blue"); 


// 第 二 ,第 三 个 文本 框 边框 为 蓝 色 


$("formn ~input") .css ("borger— width", "8px"); 


// 最 后 两 个 文本 框 边框 宽度 为 gx 


$ ("x ").css("padding- top","3px"); ”// 所 有 元 素 的 上 外 边 距 为 3px 
D; 


< /script> 
< /body> 


(1) 本 例 中 ,首先 使 用 $ ("form input"). css("width","200px");” 定 义 表单 中 所 有 
文本 框 的 默认 样式 都 是 宽度 为 200px, 第 一 个 文本 框 采用 默认 样式 。 
(2) 由 于 第 二 个 文本 框 是 表单 form 的 直接 子 元 素 ,因此 ,语句 * $ ("form 这 input"). 
css("background","pink");” 将 第 二 个 文本 框 的 背景 色 设 置 为 粉色 。 
(3) 由 于 第 二 ,第 三 个 文本 框 都 是 label 元 素 的 相 邻 兄弟 元 素 ( 文 本 框 紧邻 label) , 因 
此 ,语句 “$ ("label 十 input"). css("border-color","blue");” 将 第 二 、 第 三 个 文本 框 的 边 
框 颜 色 设置 为 蓝 色 。 
(4) 由 于 最 后 两 个 文本 框 位 于 表单 定义 的 结束 之 后 ,是 表单 form 的 普通 兄弟 元 素 
(文本 框 不 需要 紧邻 表单 form, 本 例 中 二 者 之 间 还 存在 一 个 水 平 线 元 素 二 hr/ 二 ) ,因此 ， 
语句 “$("form 一 input"). css("border-width","8px");? 将 最 后 两 个 文本 框 的 边框 宽度 
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设置 为 8px。 
94 过 滤 选 择 器 


基础 选择 器 和 层次 选择 器 可 以 满足 大 部 分 DOM 元 素 的 选取 需求 ,在 jQuery 中 还 提 
供 了 功能 更 加 强大 的 过 滤 选 择 器 ,可 以 根据 特定 的 过 滤 规 则 来 筛选 出 所 需要 的 页 面 元 素 。 

过 滤 选 择 器 又 分 为 简单 过 滤器 内容 过 滤器 .可 见 性 过 滤器 . 子 元 素 过 滤器 和 表单 对 
象 的 属性 过 滤器 。 


9.4.1 简单 过 滤器 


简单 过 滤器 是 指 以 冒号 开头 ,通常 用 于 实现 简单 过 滤 效果 的 过 滤器 。 例 如 ,匹配 找到 
的 第 一 个 元 素 等 。jQuery 提供 的 简单 过 滤器 见 表 9-3。 












































表 9-3 简单 过 滤器 

选 择 器 描 述 返 回 
:first 选取 第 一 个 元 素 单个 jQuery 对 象 
:last 选取 最 后 一 个 元 素 单个 jQuery 对 象 
:even 选取 所 有 索引 值 为 偶数 的 元 素 ,索引 从 0 开始 jQuery 对 象 数组 
:odd 选取 所 有 索引 值 为 奇数 的 元 素 ,索引 从 0 开始 jQuery 对 象 数组 
:header 选取 所 有 标题 元 素 , 如 hl、h2、h3 等 jQuery 对 象 数组 
:foucs 选取 当前 获取 焦点 的 元 素 (1.6 十 版 本 ) jQuery 对 象 数组 
:root 获取 文档 的 根 元 素 (1. 9 十 版 本 ) 单个 jQuery 对 象 
:animated 选取 所 有 正在 执行 动画 效果 的 元 素 jQuery 对 象 数 纪 
:eq(index) 选取 索引 等 于 index 的 元 素 ,索引 从 0 开始 单个 jQuery 对 象 
:gt(index) 选取 索引 大 于 index 的 元 素 , 索 引 从 0 开始 jQuery 对 象 数 纪 
:lt(index) 选取 索引 小 于 index 的 元 素 .索引 从 0 开始 jQuery 对 象 数 纪 
:not(selector) 选取 selector 以 外 的 元 素 jQuery 对 象 数 组 





【 例 9-6】 使 用 简单 过 滤器 设置 表格 样式 ,本 例文 件 9-6. html 在 浏览 器 中 的 显示 效 
果 如 图 9-6 所 示 。 
代码 如 下 : 


<html> 

<head> 

<title> 简 单 过 滤器 设置 表格 样式 < /title> 

< script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
< /head> 
<body> 

<div 

<table> 
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司 ] DAweb\ch9\9-6.ht DP- OX 
区 简单 过 洲 串 设置 表格 栏 式 。 x 


商品 名 商品 价格 商品 数量 
机 器 人 9999 10 
智能 家 居 22800 6 

工业 控制 板 49800 4 

电子 摄像 机 4580 ”20 
导航 仪 GPS 1080 30 

监控 系统 8000 10 




















图 9-6 例 9-6 的 页 面 显示 效果 


<tr><td> 商 品名 < /td><td> 商 品 价格 </td><td> 商 品 数量 < /td>< /tr> 
<tr><td 机 器 人 < /td> <ta> 999% /td> <td> 10< /td < /tr> 
<tr><td> 智 能 家 居 < /td> < to> 22800< /to> <to> & /td>< /tr> 
<tr><td> 工 业 控 制 板 < /td> <ta> 49800< /tq><to> 4< /to>< /tr> 
<tr><td> 电 子 摄像 机 < /td> < ta> 4580< /td><td> 20< /td>< /tr> 
<tr><td> 导 航 仪 GPS< /td> < td> 1080< /td> < tcp 30< /to> < /tr> 
<tr><t 中 监控 系统 < /to><to> 8000< /td> <td> 10< /td> < /tr> 
<tr><taq colspan= "3"> 共 计 6 种 商品 < /td>< /tr> 
< /table> 
</div> 
< script type= "text/javascript"> 
$ (function(e) { 
$ ("table tr: first") .css ("background- color", "yellow"); 
// 表 格 首 行 黄色 背景 
$ ("table tr: last") .css ("text— align", "right"); 
// 表 格 尾行 文本 右 对 齐 
$ ("table tr: eq(4)") .css ("color", "red"); 
1/ 索引 值 为 4 的 行 的 文字 颜色 为 红色 
$ ("table tr: lt()m) .css ("font- weight "bold"); 
/表格 首 行文 字 加 粗 
$ ("table tr: odd") .css ("background- color", 啡 ddam7 
// 行 的 索引 值 为 奇数 时 背景 色 为 浅 灰 色 
$ (": root") .css ("background- colorm "ivry"); 
// 网 页 乳白 色 背 景 
$ ("table tr: not(: first)m) .css ("font- size", "13pt"); 
// 表 格 除 首 行 外 的 字体 大 小 13pt 
D; 
< /script> 
< /pody> 
< /htm> 


【说 明 】 “table tr:eq(4)” 表 示 索 引 值 为 4 的 行 的 文字 颜色 为 红色 ,对 应 的 是 实际 表 
格 的 第 5 行 ,"table trsodd" 表 示 行 的 索引 值 为 奇数 时 背景 色 为 浅 灰色 ,对 应 的 是 实际 表 
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格 的 偶数 行 。 





9.4.2 内 容 过 滤器 


内 容 过 滤 选 择 器 是 指 根据 元 素 的 文字 内 容 或 所 包含 的 子 元 素 的 特征 进行 过 滤 的 选择 
器 , 见 表 9-4。 


表 9-4 内 容 过 滤器 




















选 择 器 描 述 返 回 
:contains(text) 选取 包含 text 内 容 的 元 素 jQuery 对 象 数组 
:has(selector) 选取 含有 selector 所 匹配 元 素 的 元 素 jQuery 对 象 数组 
:empty 选取 所 有 不 包含 文本 或 者 子 元 素 的 空 元 素 jQuery 对 象 数 组 
:parent 选取 含有 子 元 素 或 文本 的 元 素 jQuery 对 象 数 组 





【 例 9-7】 使 用 内 容 过 滤器 设置 表格 样式 ,本 例 
文件 9-7. html 在 浏览 器 中 的 显示 效果 如 图 9-7 所 示 。 | 二 
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代码 如 下 : 内 容 过 湾 器 设置 表格 栏 式 。 x 
< head> 智能 家 居 22800 6 
<title> 内 容 过 滤器 设置 表格 样式 < /title> 工业 控制 板 49800 ”和 
We i 电子 摄像 机 4580 
< script src= js/japery— Si 导航 仪 GPS，1080 而 
type= "text/javascript"> < /script> 监控 系统 ”8000 
< head 共计 6 种 商品 
<body> 
<div> 
<table> 图 9-7 例 9-7 的 页 面 显 示 效 果 


<tr><t 中 商品 名 < /ta><tc> 商 品 价格 
</t 中 <t 中 商品 数量 < /to>< /tr> 
<tr><t 中 机 器 人 < /td> <td> 999% /td><td 10< /td < /tr> 
<tr><td> 智 能 家 居 < /td>< to> 22800< /tc><to> & /to></tr> 
<tr><tdq> 工 业 控 制 板 < /ta>< to>< span> 49800< /span> < /td> <td> 4< /td> 
</tr> 
<tr><td> 电 子 摄像 机 < /ta><to> 4580< /te><to>< /to>< /tr> 
<tr><td> 导 航 仪 GPS< /td> < tc> < span> 1080< /spar> < /td> <td> 30< /td> 
< /tr> 
<tr><tdy 监 控 系 统 < /td> <td> 8000< /to><to>< /to>< /tr> 
<tr><tqd colspar= "3"> 共 计 6 种 商品 < /tc>< /tr> 
< /table> 
</div> 
< script type= "text/javascript"> 
$ (function(e) { 
$ ("td: contains ("机 ')") .css ("font— weight", "bold"); 
// 包 含 “ 机 ” 字 的 单元 格 文字 加 粗 
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$ ("td: parent") .css ("background- color", 啡 Gd")7 

// 包 含 内 容 的 单元 格 浅 灰色 背景 
$ ("td: erpty") .css ("background- color" "white"); 

// 内 容 为 空 的 单元 格 白色 背景 
$ ("ta") .has ('span') .css (background color' "yellow"); 

// 有 span 标 签 的 单元 格 黄色 背景 


9.4.3 可 见 性 过 滤器 


元 素 的 可 见 状 态 有 两 种 ,分 别 是 隐藏 状态 和 显示 状态 。 可 见 性 过 滤器 就 是 利用 元 素 
的 可 见 状态 匹配 元 素 的 。 因 此 ,可 见 性 过 滤器 有 两 种 ,一 种 是 匹配 所 有 可 见 元 素 的 
“:visible” 过 滤器 ; 另 一 种 是 匹配 所 有 不 可 见 元 素 的 “ :hidden” 过 滤器 , 见 表 9-5。 


表 9-5 可 见 性 过 滤器 











选择 器 描述 返 回 
:hidden 选取 所 有 不 可 见 元 素 ,或 者 type 为 hidden 的 元 素 jQuery 对 象 数组 
:visible 选取 所 有 的 可 见 元 素 jQuery 对 象 数组 





在 应 用 “:hidden” 过 滤器 时 ,display 属性 是 none 以 及 type 属性 为 hidden 的 input 元 
素 都 会 被 匹配 到 。 


【 例 9-8】 


使 用 可 见 性 过 滤器 获取 页 面 上 隐藏 和 显示 的 input 元 素 的 值 , 本 例文 


件 9-8. html 在 浏览 器 中 的 显示 效果 如 图 9-8 所 示 。 





[ll 
S| DAweb\cho\9-8.html DCxl ly 
多 可 见 性 过 法 器 示例 x[ 
可 见 性 过 滤器 获取 页 面 上 隐藏 和 显示 的 input 元 素 的 值 


显示 的 input 元 素 

























全 显示 的 input 元 素 
2 aatinputi 素 
我 县 了 芝 域 


Ea 


图 9-8 例 9-8 的 页 面 显示 效果 
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代码 如 下 : 


<html> 
<head> 
<title> 可 见 性 过 滤器 示例 < /title> 
< script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> 
</script> 
< script type= "text/javascript"> 
$ (document) .ready (function() { 
Var visibleVal= $ ("input: visible") .val (); 
// 取 得 显示 的 input 的 值 


var hidderVall= $ ("input: hidden: eq(0)") .val (); // 取 得 隐藏 的 文本 框 的 值 
Var hidderVal2- $ ("input: hidden: eq(1)") -val (); // 取 得 隐藏 域 的 值 
alert (visibleVal+ "\n\r"+ higgenVall+ "\n\r"+ higdenVal?2); 
//alert 取得 的 信息 
D; 
</script> 
< /head> 
<h3> 可 见 性 过 滤器 获取 页 面 上 隐藏 和 显示 的 input 元 素 的 值 < /h3> 
< input type= "text" value= "显示 的 inptt 元 素性 
< input type= "text" value= "隐藏 的 input 元素" style= "display: none"> 
< input type= "hidden" value= 哦 是 隐藏 域 "~ 
< /pody> 
</htm> 


9.4.4 子 元素 过 滤器 


在 页 面 设计 过 程 中 需要 突出 某 些 行 时 ,可 以 通过 简单 过 滤器 中 的 “:eq()? 来 实现 表格 
中 行 的 凸显 ,但 不 能 同时 让 多 个 表格 具有 相同 的 效果 。 在 jQuery 中 , 子 元 素 过 滤器 可 以 
轻松 地 选取 所 有 父 元 素 中 的 指定 元 素 , 并 进行 处 理 , 见 表 9-6 。 
表 9-6 子 元 素 过 滤器 























选 择 器 描 述 返 回 
:first-child 选取 每 个 父 元 素 中 的 第 一 个 元 素 jQuery 对 象 数组 
:last-child 选取 每 个 父 元 素 中 的 最 后 一 个 元 素 jQuery 对 象 数组 
:only-child 当 父 元 素 只 有 一 个 子 元 素 ,进行 匹配 ;否则 不 匹配 jQuery 对 象 数 组 
:nth-child(N|odd|even) | 选取 每 个 父 元素 中 的 第 N 个 子 或 奇偶 元 素 jQuery 对 象 数 组 
:first-of-type 选取 每 个 父 元 素 中 的 第 一 个 元 素 (1. 9 十 版 本 ) jQuery 对 象 数组 
:last-of-type 选取 每 个 父 元 素 中 的 最 后 一 个 元 素 (1. 9 十 版 本 ) jQuery 对 象 数组 
bret iype Ss 9 十 jQuery 对 象 数组 








【 例 9-9】 子 元 素 过 滤器 示例 ,本 例文 件 9-9. html 在 浏览 器 中 的 显示 效果 如 图 9-9 
所 示 。 
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| 











代码 如 下 : = 
<htm> HE Dxwebvche\9-9ht DP- CO” 
<head> 











<title> 子 元 素 过 滤器 示例 < /title> 
< script src= "js/jquery- 3.2.1-min.js" 
type= "text/javascript"> < /script> 
< /head> 
<body> 
<ul> 
<1i> 机 器 人 < /> 图 9-9 例 9-9 的 页 面 显示 效果 
<1i> 智 能 家 居 < /1i> 
<1i> 电 子 摄像 机 < /1i> 
<1i> 导 航 仪 es< /1i> 
</u> 
< script> 
$ (document) .ready (function() { 
$ ("ul 1i: nth- child (even) ") .css ("border", "2px solid red"); 
// 选 取 索 引 为 偶数 的 二 子 元 素 添加 边框 





咏 100% ~ 








Ds 
< /script> 
< /body> 
</htm> 


【说 明 】 网 页 中 定义 了 1 个 ul 列表 ,其 中 包含 4 个 直子 元 素 。 在 jQuery 程序 中 使 
用 $("ul li:nth-child(Ceven)") 过 滤器 选取 所 有 索引 为 偶数 的 1i 子 元 素 , 然 后 调用 css() 方 
法 为 选取 的 li 子 元 素 添加 红色 实 线 边框 。 


9.4.5 表单 对 象 的 属性 过 滤器 


表单 对 象 的 属性 过 滤器 是 指 通过 表单 对 象 的 属性 特征 进行 筛选 的 选择 器 ,包括 
“:enabled” 过 滤器 “:disabled" 过 滤器 “:checked" 过 滤器 和 ":selected” 过 滤器 4 种 , 见 
表 9-7。 


表 9-7 ”表单 对 象 的 属性 过 滤器 




















选择 器 描 ” 述 返 回 

:enabled 选取 表单 中 属性 为 可 用 的 元 素 jQuery 对 象 数组 
:disabled 选取 表单 中 属性 为 不 可 用 的 元 素 jQuery 对 象 数组 
:checked 选取 表单 中 被 选中 的 元 素 ( 单 选 按钮 、 复 选 框 7 jQuery 对 象 数组 
:selected 选取 表单 中 被 选中 的 选项 元 素 (下 拉 列 表 框 ) jQuery 对 象 数组 


【 例 9-10】 利用 表单 过 滤器 匹配 表单 中 相应 的 元 素 , 本 例文 件 9-10. html 在 浏览 器 
中 的 显示 效果 如 图 9-10 所 示 。 
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四 目 Dxwebvch9\9-10hrP <- Cx| 人 而 妆 于 
忆 雪 单 对 登 的 层 性 过 洲 匡 x 


利用 表单 过 滤器 匹配 表单 中 相应 的 元 素 
爱好 : 音乐 回 舞蹈 加 足球 日 

学 历 : 研究 生 回 大 学 © 大 专 回 

职业 ， [教员 [=] 一 一 一 - 














系 腕 开罗 暂 不 能 提 志 








图 9-10 例 9-10 的 页 面 显示 效果 


代码 如 下 : 


<html> 
<head> 
<title> 表 单 对 象 的 属性 过 滤器 < /title> 
< script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
< script type= "text/javascript"> 
$ (document) .ready (function() { 
// 设 置 选中 的 复 选 框 的 背景 颜色 为 红色 
$ ("input: checked") .css ("background- color", "redm 7 
$ ("input: disabled") .val ("系统 升级 暂 不 能 提交 "); 
D; 


function selectVal () { /下 拉 列 表 框 变化 时 执行 的 方法 
alert($ ("select option: selected") -val ()); // 显 示 选 中 的 值 
} 
< /script> 
< /head> 
< body> 
< fom> 


<h3> 利 用 表单 过 滤器 匹配 表单 中 相应 的 元 素 < /h3> 
爱好 : 音乐 < input type= "checkbox" checked= "checked" value=" 彰 乐 "/> 
舞蹈 < input type= "checkbox" checked= "checked" value= " 别 蹈 "/> 
足球 < input type= "checkbox" value= "足球 "/><br /> 
学 历 : 研究 生 < input type= "radio" checked= "checked" value= "研究 生 "> 
大 学 < input type= "radio" value= "大 学 "> 
大 专 < input type= "radio" checked= "checked" value= "大 专 "%> <br /> 
职业 : 
< select onchange= "selectVal (> 

<cption value= "工程 师 吃 工程 师 < /option> 

<cption value= 喇 师 吃 教 师 < /cption> 

< option value= "会 计 师 吃 会 计 师 < /option> 
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< /select><br /><br /> 
< input type= "button" value= 提交 " disabled> 
< /fom> 
< /pody> 
< /htm> 
【说 明 】 网 页 中 定义 了 3 个 复 选 框 .3 个 单 选 按 钮 .1 个 下 拉 列 表 框 和 1 个 按钮 。 其 
中 ,选中 的 2 个 复 选 框 .2 个 单 选 按钮 的 背景 色 为 红色 ;选择 下 拉 列 表 框 中 的 “教师 ?选项 ， 
则 弹出 消息 框 显示 选择 的 列表 项 的 值 ;不 可 用 按钮 的 value 值 被 修改 为 “系统 升级 暂 不 能 


95 属性 选择 器 


属性 选择 器 是 指 根据 元 素 的 属性 来 筛选 元 素 的 选择 器 , 见 表 9-8。 





























表 9-8 属性 选择 器 
选 择 器 描 述 返 回 
[attribute] 选取 包含 给 定 属性 的 元 素 jQuery 对 象 数组 
[attribute= value] 选取 属性 等 于 某 个 特定 值 的 元 素 jQuery 对 象 数组 
Lattribute! = value] 选取 属性 不 等 于 或 不 包含 某 个 特定 值 的 元 素 ”| jQuery 对 象 数组 
[attribute’= value] 选取 属性 以 某 个 值 开始 的 元 素 jQuery 对 象 数 组 
[attribute$ 一 value] 选取 属性 以 某 个 值 结 尾 的 元 素 jQuery 对 象 数组 
[attribute * = value] 选取 属性 中 包含 某 个 值 的 元 素 jQuery 对 象 数组 
[attributel]Lattribute2][Lattribute3] | 复合 属性 选择 器 ,需要 同时 满足 多 个 条 件 时 使 用 | jQuery 对 象 数 组 


【 例 9-11】 属性 选择 器 示例 ,本 例文 件 9-11. html 在 


























浏览 器 中 的 显示 效果 如 图 9-11 所 示 。 QS 辐 DAweb\ch9\9-11t DP- OX 
代码 如 下 : EE 
ee 尖 一 一 一 一 
<head> 
<title> 属 性 选择 器 示例 < /title> | 
< script src= "js/jquery- 3.2.1.min.js" 
type= "text/javascript"> < /script> 
< /head> 图 9-11 例 9-11 的 页 面 显示 效果 
<body> 


<div>no id /div> 

<div id "idl" idql< /div> 
<div>no id /div> 

<div id "idq2"> id2< /div> 
< Script> 

$ (Gocument) .ready (functicn (){ 
$ ('div[id] ') .css ("border"，"2px dashed blue"); 
// 所 有 包含 i 属性 的 div 元 素 添加 蓝 色 虚 线 边框 
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$ ('div[id= idl] ') .css ("border", "Gpx double red"); 
//ia 属 性 等 于 idl 的 div 元 素 添加 红色 双 线 边框 
也 
< /script> 
< /body> 
</htm> 
【说 明 】 网 页 中 定义 了 4 个 div 元 素 , 其 中 2 个 定义 了 id 属性 。 在 jQuery 程序 中 使 
用 $ (div[idj) 属 性 选择 器 选取 所 有 包含 id 属性 的 div 元 素 ,然后 调用 css() 方 法 为 选取 
的 div 元 素 添加 蓝 色 虚线 边框 ;使 用 $ (div[id 二 id1]) 属 性 选择 器 选取 id 属性 等 于 idl 的 
div 元 素 ,然后 调用 css() 方 法 为 选取 的 div 元 素 添加 红色 双 线 边框 。 


96 表单 选择 器 


表单 在 Web 前 端 开发 中 占据 重要 的 地 位 ,在 jQuery 中 引入 表单 选择 器 能 够 让 用 户 
更 加 方便 地 处 理 表单 数据 。 通 过 表单 选择 器 可 以 快速 定位 到 某 类 表单 元 素 , 见 表 9-9。 






































表 9-9 表单 选择 器 
选择 器 描 述 返 回 
ee \ 一 textarea 二 、 一 select 二 和 二 button 二 jQuery 对 象 数组 
:text 选取 所 有 的 单行 文本 框 jQuery 对 象 数组 
:password 选取 所 有 的 密码 框 jQuery 对 象 数 组 
:radio 选取 所 有 的 单 选 框 jQuery 对 象 数 组 
:checkbox 选取 所 有 的 多 选 框 jQuery 对 象 数 组 
:submit 选取 所 有 的 提交 按钮 jQuery 对 象 数组 
:image 选取 所 有 的 图 片 按钮 jQuery 对 象 数组 
:button 选取 所 有 的 按钮 jQuery 对 象 数组 
:file 选取 所 有 的 文件 域 jQuery 对 象 数组 
:hidden 选取 所 有 的 不 可 见 元 素 jQuery 对 象 数组 


【 例 9-12〗 使 用 表单 选择 器 统计 各 个 表单 元 素 的 数量 ,本 例文 件 9-12. html 在 浏览 
器 中 的 显示 效果 如 图 9-12 所 示 。 
代码 如 下 : 


<html> 
<head> 
<title> 表 单 选择 器 < /title> 
< script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
< style type= "text/css"> 
* {margin top: Spx;} 
div{height: 210px; } 
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@ filey//Dyweby/ch9/9-12.html?userName=%C796EB%CA%6E4%6C8%6EB%D3%6C396BB%A7%C3%FBE 及 OX| (0) Ve oY 
总 去 单 远 择 器 x 





















































联 呈 , 一 一 一 统计 结果 如 下 ， 
用 名 <input> 标 签 的 数量 为 ，14 
密码， FR 2 
爱 好 ， 日 音乐 日 舞蹈 日 足球 日 游戏 窗 人 要 | Ey 
单 选 按钮 的 数量 为 ，4 
资料 上 传 ， Ga 上 上传 文本 域 的 就 量 为 ，1 
热 销 产品 ， 回 机 器 人 上 智能 家 居 回电 子 摄像 机 器 导 航 仅 PS 加 
提交 按 sl 
普通 按钮 的 数量 为 ，1 
羽 100% ~ 


图 9-12 例 9-12 的 页 面 显示 效果 


#fomDiv{float: left;padding: px; width: 550px;border: lpx solid #666;} 
# showResult {float: right;padding: rmx; width: 200px; border: lrx solid #666;} 
</style> 
< /head> 
<body> 
< div id "fomDiv> 
< fo id- "myfomm" action= 叭 "> 
账 号 : <input type= "text" /><br /> 
用 户 名 : < input type= "text" name= "userName" /><br /> 
密 ” 码 : < input type= "password" name= "userPwd"/><br /> 
爱好: <input type= "radio" name= "hocby" value= "音乐 "/> 音 乐 
< input type= "radio" name= "hobby" value- " 别 蹈 "/> 舞 中 
< input type= "radio" name= "hobby" value= "足球 "/> 足 球 
< input type= "radio" name= "hobby" value= "游戏 "> 游戏 <br /> 
资料 上 传 : < input type= "file" /><br /> 
热 销 产品 : < input type= "checkbox" name= "goodsType" value= "机 器 人 " 
checked /> 机 器 人 
< input type= "checkbox" name= "goodsType" value= " 哮 能 家 居 " /> 智能 家 居 
< input type= "checkbox" name= "goodsType" value= "电子 摄像 机 " checked/> 
电子 摄像 机 
< input type= "checkbox" name= "goodsType" value= "导航 仪 ces" /> 导航 仪 
GPS< br/> 
< input type= "sutmit" value= "提交 "人 > 
< input type= "button" value= " 重 置 " /><br /> 
< /fom> 
</div> 
<div id "showResult"> < /div> 
< script type= "text/javascript"> 
$ (function(e) { 
var result= 哟 计 结 果 如 下 : <hr/>"; 
result+="<br /> &lt;inputsggt; 标 签 的 数量 为 : "+$(": input") .length; 
result+="<br /> 单行 文本 框 的 数量 为 : "+ $ (": text") .length; 
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result+="<br /> 密码 框 的 数量 为 : "+ $ (": password") .length; 
result+="<br 人 > 单 选 按钮 的 数量 为 : "+$(": radio") .length; 

result+="<br /> 上 传 文本 域 的 数量 为 : 叶 $(": file") .length; 
result+="<br /> 复 选 框 的 数量 为 : "+ $ (": checkbox") .length; 
result+="<br /> 提交 按钮 的 数量 为 : "+ $(": suibmit") .length; 
result+="<br /> 普通 按钮 的 数量 为 : "+ $(": button") .length; 
$ (#4 showResult") .html (result); 

Ds; 
< /script> 
< /pody> 
< /htm> 


习 题 


1. 使 用 基础 选择 器 为 页 面 元 素 添 加 样式 ,如 图 9-13 所 示 。 


| 国 pswebvche\ 习 是 wde-Lhtml Dr-ox|n 
总 基本 选择 器 示例 x 











DOU 寻 条 与 jQuery 姑 委 所 析 豆 其 化 

jQuery 对 象 不 能 直接 使 用 DOM 对 象 的 方法 ， 

但 可 以 通过 将 jQuery 对 象 转换 成 DOM 对 象 后 再 调用 其 方法 。 
套 无 族 雁 竹 在 70uery 办 上 党 万 扒 话 不 济 








号 100% ~ 








图 9-13 题 1 图 


2. 使 用 内 容 过 滤器 设置 表格 样式 ,如 图 9-14 所 示 。 
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[姓名 年 龄 | 学 历 
著 三 攻 “| 国 国民 专 
医 四 30 
车 五 25 “| 本科 
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图 9-14 题 2 图 


3. 使 用 层次 选择 器 为 表单 的 直接 子 元 素 文本 框 换 肤 , 单 击 “ 换 肤 ” 按 钮 ,改变 文本 框 
的 样式 ,如 图 9-15 所 示 。 
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图 9-15 题 3 图 


4. 使 用 可 见 性 过 滤器 显示 与 隐藏 页 面 元 素 , 单 击 “ 显 示 隐 藏 元 素 ” 按 钮 ,在 “页 面 顶 
部 ”和 “用 户 ID” 之 间 显示 出 隐藏 的 菜单 栏 ,如 图 9-16 所 示 。 























eT 
Oe CE 
情 可 内 人 id 涉 器 
页 面 顶部 
用 户 ID: 
用 户 名 
EE 用 户 名 ， | 
瑟 100% ~ 
图 9-16 题 4 图 


. 综合 使 用 jQuery 选择 器 制作 隔行 换 色 鼠标 指向 表格 行 变色 的 页 面 ,如 图 9-17 
上 





深圳 


电子 摄像 机 苏州 
导航 仪 GPS 上 海 





图 9-17 题 5 图 
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通过 jQuery 提供 的 选择 器 快速 定位 到 页 面 的 每 个 元 素 后 ,对 元 素 可 以 进行 各 种 操 
作 , 例 如 属性 操作 ,样式 操作 、 内 容 和 值 操作 、DOM 节点 操作 等 。 





101 元 素 属 性 的 操作 


jQuery 提供 了 如 表 10-1 所 示 的 对 元 素 属性 进行 操作 的 方法 。 其 中 key 和 name 都 
代表 元 素 的 属性 名 称 ,properties 代表 一 个 集合 。 


表 10-1 对 元 素 属 性 进行 操作 的 方法 
方 法 描 述 
attr(name| pro| key .val| fn) 用 于 获取 或 设置 元 素 的 属性 
removeAttr(name) 用 于 删除 元 素 的 某 一 个 属性 
用 于 获取 或 设置 元 素 的 一 个 或 多 个 属性 
用 于 删除 由 prop() 方 法 设置 的 属性 集 











prop(Cname|pro|key,val|fn) 





removeProp(name) 





当 元 素 属 性 (如 checked、selected 和 disabled 等 ) 取 值 为 true 或 false 时 ,通过 prop() 
方法 对 属性 进行 操作 ,而 其 他 普通 属性 通过 attr() 方 法 进行 操作 。 


10.1.1 获取 或 设置 元 素 属性 


1. attr () 方 法 


attr() 方 法 用 于 获取 所 匹配 元 素 的 集合 中 第 一 个 元 素 的 属性 ,或 设置 所 匹配 元 素 的 
一 个 或 多 个 属性 。 语 法 格式 如 下 : 


参数 说 明 如 下 。 
。 name: 表示 元 素 的 属性 名 。 
。 properties: 这 是 一 个 由 key/value 键 值 对 构成 的 集合 ,用 于 设置 元 素 中 的 1 一 n 个 
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属性 。 

。 key: 表示 需要 设置 的 属性 名 。 

。 value: 表示 需要 设置 的 属性 值 。 

。 function(index,oldAttr) : 表示 使 用 函数 的 返回 值 作为 属性 的 值 ,第 一 个 参数 为 
当前 元 素 的 索引 值 ,第 二 个 参数 为 原先 的 属性 值 。 

例如 ,返回 二 img 二 集合 中 第 一 个 图 像 的 src 属性 值 的 代码 如 下 : 





$ ("img") .attr ("src"); 
2. prop 人 〇 方法 
prop() 方 法 用 于 获取 所 匹配 元 素 的 集合 中 第 一 个 元 素 的 属性 ,或 设置 所 匹配 元 素 的 


一 个 或 多 个 属性 。prop() 方 法 多 用 于 boolean 类 型 属性 操作 ,例如 checked selected 和 
disabled 等 。 语 法 格式 如 下 : 


10. 


prop() 方 法 的 参数 说 明 与 attr() 方 法 的 参数 说 明 相 同 ,这 里 不 再 袭 述 。 
例如 ,返回 第 一 个 复 选 框 状态 的 代码 如 下 : 


$ ("input [type= 'checkbox']") .prop ("checked") ; 


1.2 删除 元 素 属性 


1. removeAttr () 方 法 

removeAttr() 方 法 用 于 删除 匹配 元 素 的 指定 属性 ,语法 格式 如 下 : 

TemcveRttr (name) 

例如 ,删除 所 有 img 的 title 属性 的 代码 如 下 : 

$ ("img") .removeAttr ("title"); 

2. removeProp () 方 法 

removeProp( ) 方 法 用 于 删除 由 prop() 方 法 设置 的 属性 集 ,语法 格式 如 下 : 

TemoveFrop (name) 

例如 ,将 所 有 复 选 框 设 置 为 可 用 状态 的 代码 如 下 : 

$ ("input [type= 'checkbox']") -removeProp ("disabled") ; 

【 例 10-1】 修改 页 面 元素 的 属性 ,本 例文 件 10-1. html 在 浏览 器 中 的 显示 效果 如 
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图 10-1 所 示 。 
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、 ) DAweb\ch10\10-1.html 
情 修改 而 元 素 的 属性 











[产品 | 
回 机 器 人 回 导航 仪 6Ps 回 智能 家 居 国电 子 摄像 机 
[全 选 」 [反选 | [ 全 部 禁用 | | 取消 苛 用 | 


和 DNweb\ch10\10-Lhtml 
感 修改 页 面 元 素 的 属性 x 



































| 交 搞 产品 | 
团 机 器 人 固 导航 仪 6Ps 回 智能 家 居 国电 子 摄像 机 
[全 选 ] [ 反 过 | [全 部 树 用 | [ 取消 禁用 ] 

















图 10-1 例 10-1 的 页 面 显 示 效 果 


代码 如 下 : 


<html> 


<head> 
<title> 修 改 页 面 元 素 的 属性 < /title> 
< script src= 门 s/jquery- 3.2.1.min.js" type= "text/javascript"> 
< /script> 
< /head> 
< body> 
< img idF "prodl" src= "images/01.jpg"/> 
< img ic "prodz" src= "images/02.jpg"/> <hr/> 
< input type= "button" value= "交换 产品 " onclick= "swap()"/><hr/> 
< input type= "checkbox" name= "goodsType" value= "机 器 人 " checked 人 > 机 器 人 
< input type= "checkbox" name= "goodsType" value= "导航 仪 Ges" /> 导航 仪 ces 
< input type= "checkbox" name= "goodsType" value= "智能 家 居 "/> 智 能 家 居 
< input type= "checkbox" name= "goodsType" value= "电子 摄像 机 " checked/> 电 子 
摄像 机 
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<br/><hr/> 
< input type= "putton" value= "全 选 " onclick= "changeSelect ()"/> 
< input type= "button" value= "反选 " onClick= "reverseSelect ()"/> 
< input type= "button" value= "全 部 禁用 " onclick= "disabledselect () "/> 
< input type= "button" value= "取消 禁用 " onclick= "enabledselect ()"/> 
< script type= "text/javascript"> 
function swap(){ // 单 击 * 交 换 产品 ?按钮 ,交换 两 幅 图 像 
Var prodsrc= $ ("#prodl") .attr ("src"); 
$ (#prodl") .attr ("src", function () { retum $ (#prod2") .attr 
("src") }); 
$ (#prod2") .attr ("src",prodsrc); 
} 
finction changeSselect () { // 单 击 * 全 选 "按钮 ,选中 所 有 复 选 杠 
$ ("input [type= 'checkbox']") .prop ("hecked", true); 
} 
function reverseSelect () { // 单 击 * 反 选 " 按 钮 ,将 复 选 框 进行 反 选 
$ ("input [type= 'checkbox"]") .prop ("checked", function (index, 
oldValue){ 
retum !olGvValuey 
])7 
} 
function disabledselect () { // 单 击 * 全 部 禁用 ”按钮 ,将 复 选 框 全 部 选中 后 再 设置 禁用 
$ ("input [type= 'chectbox']m .prop ({disabled: true, decked: true}); 
L 
function enabledselect () { 
// 单 击 * 取 消 禁 用 ?按钮 ,所 有 复 选 框 恢复 到 正常 状态 
$ ("input [type= 'checkbaox"]") .rempveProp ("disabled"); 


【说 明 】 在 上 面 的 代码 中 ,使 用 attr() 和 prop() 方 法 设置 元 素 的 属性 ,使 用 
removeAttr() 和 removeProp() 方 法 删除 元 素 指 定 的 属性 。 


102 元 素 样式 的 操作 


在 jQuery 中 ,对 元 素 的 CSS 样式 操作 可 以 通过 修改 CSS 类 或 者 设置 CSS 属性 来 
实现 。 


10.2.1 修改 CSS 类 


在 网 页 设计 中 ,设计 者 如 果 想 改变 一 个 元 素 的 整体 外 观 ,例如 给 网 站 换 肤 ,就 可 以 通 

过 修改 该 元 素 所 使 用 的 CSS 类 来 实现 。 在 jQuery 中 ,提供 了 如 表 10-2 所 示 的 几 种 用 于 
修改 CSS 类 的 方法 。 

243 


Web 前 端 开发 实例 教程 一 HIM 5+ JavaScript + jQuery 





方 法 


表 10-2 修改 CSS 类 的 方法 
描 述 





addClass(class) 


为 所 有 匹配 的 元 素 添 加 指定 的 CSS 类 名 





removeClass(class) 


从 所 有 匹配 的 元 素 中 删除 全 部 或 者 指定 的 CSS 类 





toggleClass(class) 


如 果 存 在 (不 存在 ) 就 删除 (添加 ) 一 个 CSS 类 





toggleClass(class, switch) 





如 果 switch 参数 为 true 则 加 上 对 应 的 CSS 类 ,否则 就 删除 ,通常 switch 
参数 为 一 个 布尔 型 的 变量 


需要 注意 的 是 ,使 用 addClass() 方 法 添加 CSS 类 时 ,并 不 会 删除 现 有 的 CSS 类 。 同 
时 ,在 使 用 表 10-2 所 列 的 方法 时 ,其 class 参数 都 可 以 设置 多 个 类 名 ,类 名 与 类 名 之 间 用 









































空格 分 开 。 
【 例 10-2】 修改 CSS 类 示例 ,本 例文 件 10-2. html 在 浏览 器 中 的 显示 效果 如 图 10-2 
所 示 。 
Sa oAweb\chio10-2 Pp - Ox 
段落 内 容 换 肤 
添加 样式 | [而 际 样式 ] 
图 10-2 例 10-2 的 页 面 显示 效果 
代码 如 下 : 
<html> 
<head> 
<title> 修 改 css 类 示例 < /title> 
<style> 
p{ 
margin: 8px; 
font- size: 16px7 
} 
.selected{ 
color: red; // 设 置 文字 颜色 为 红色 
} 
.addborder{ 
border: 6px double blue; // 设 置 gx 双 线 蓝 色 边框 
} 
</style> 
< script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
< /head> 
<body> 


< 户 段 落 内 容 换 肤 < /p> 
<button id= "aqdclass"> 添 加 样式 < /button> 
<button id= "removeCclass"> 删 除 样式 < /button> 
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<script> 
$ ("4agdclass") .click (function() { 
$ ("Pp") -aqdclass ("selected addborder"); // 为 p 元 素 添 加 selected 和 addborder 两 个 类 
D; 
$ ("# removeClass") .click (function() { 
$ ("p") .removeClass ("selected addborder"); 
// 为 p 元 素 删 除 selectea 和 addborder 两 个 类 
D; 
< /script> 
< /pody> 
< /htm> 


【说 明 】 网 页 中 定义 了 2 个 按钮 和 1 个 p 元 素 , 单 击 “ 添 加 样式 ”按钮 ,会 调用 
addClass() 方 法 为 p 元 素 添加 selected 和 addborder 两 个 类 ; 单 击 “删除 样式 ”按钮 ,会 调 
用 removeClass() 方 法 为 p 元 素 删除 selected 和 addborder 两 个 类 。 


10.2.2 设置 CSS 属性 


如 果 需 要 获取 或 设置 某 个 元 素 的 具体 样式 (设置 元 素 的 style 属性 ) ,jQuery 也 提供 
了 相应 的 方法 , 见 表 10-3。 


表 10-3 设置 CSS 属性 的 方法 














方 法 描 述 
css(name) 返回 第 一 个 匹配 元 素 的 样式 属性 
css(name,value) 为 所 有 匹配 元 素 的 指定 样式 设置 值 
css(properties) 以 {属性 : 值 ;属性 : 值 ;..….} 的 形式 为 所 有 匹配 的 元 素 设置 样式 属性 


需要 注意 的 是 ,使 用 css() 方 法 设置 属性 时 , 既 可 以 使 用 连 字符 形式 的 CSS 表示 法 
(如 background-color) ,也 可 以 使 用 大 小 写 形 式 的 DOM 表示 法 (如 backgroundColor) 。 

【 例 10-3】 设置 CSS 属性 示例 ,本 例文 件 10-3. html 在 浏览 器 中 的 显示 效果 如 
图 10-3 所 示 。 


站 | DAweb\eh1O\10-3.html PP-cx 必 汪汪 2 | 司 pswebvhlouo-3html Dp-cx)n 
确认 年 css 属 性 示例 x 苛 设 年 css 导 性 示例 x 












































单 击 按钮 看 看 段落 字体 、 背 景 和 边框 的 变化 单 击 按钮 看 看 段落 字体 、 背 景 和 边框 的 变化 
段落 内 容 换 肤 二 
虑 落座 容 换 肤 




















GE 


有 100% ~ 下 100%6 ~ 

















图 10-3 例 10-3 的 页 面 显示 效果 
代码 如 下 : 
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<htm> 
<head> 
<title> 设 置 css 属性 示例 < /title> 
< script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
< script type= "text/javascript"> 
$ (Gocument) .ready (function (){ 
$ ("button") .click(function (0{ 
// 单 击 按钮 给 段落 设置 字体 大 小 加 倍 、 黄 色 背 景 、 双 线 边框 效果 
$ ("Pp") .css ({"font— size": "200%", background aolor": "Yellowv border": 
"Erx double blue"])7 
Ds; 
Ds; 
< /script> 
< /head> 
<body> 
<h2> 单 击 按钮 看 看 段落 字体 .背景 和 边框 的 变化 < /bh2> 
< 户 段 落 内 容 换 肤 < /p> 
<button type= "button"> 段 落 换 肤 < /button> 
< /pody> 
</htm> 





103 元 素 内 容 和 值 的 操作 


html() 和 text() 方 法 用 于 操作 页 面 元 素 的 内 容 ,val() 方 法 用 于 操作 元 素 的 值 。 上 述 
方法 的 使 用 方式 基本 相同 , 当 方法 没有 提供 参数 时 表示 获取 匹配 元 素 的 内 容 或 值 ; 当 方法 
携带 参数 时 表示 对 匹配 元 素 的 内 容 或 值 进行 修改 。 


10.3.1 操作 元 素 内 容 


元 素 的 内 容 是 指定 义 元 素 的 起 始 标记 和 结束 标记 之 间 的 内 容 , 又 可 以 分 为 文本 内 容 
和 HTML 内容。 通过 下 面 的 代码 来 说 明 如 何 区 分 元 素 中 的 文本 内 容 和 HTML 内 容 。 

<body> 

< 他 段落 内 容 换 肤 < /p> 

< /body> 

在 上 述 代 码 中 ,body 元 素 的 文本 内 容 就 是 “段落 内 容 换 肤 ”, 文 本 内 容 不 包含 元 素 的 
子 元 素 , 只 包含 元 素 的 文本 内 容 ;而 “二 p 二 段落 内 容 换 肤 二 /p 宝 ”就 是 body 元 素 的 
HTML 内 容 ,HTML 内 容 不 仅 包 含 元 素 的 文本 内 容 , 还 包含 元 素 的 子 元 素 。 


1. 操作 文本 


jQuery 提供 了 text() 和 text(val) 两 个 方法 用 于 对 文本 内 容 操作 ,其 中 text() 用 于 获 
取 全 部 匹配 元 素 的 文本 内 容 ,text(val) 用 于 设置 全 部 匹配 元 素 的 文本 内 容 。 例 如 ,在 一 个 
HTML 页 面 中 ,包括 下 面 3 行 代码 。 
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<div> 
<p id "intro> 宇 宙 电 子 ,天 天 向 上 < /p> 
</div> 
要 获取 div 元 素 的 文本 内 容 , 可 以 使 用 下 面 的 代码 。 
$ ("div") .text (); 
得 到 的 结果 如 下 : 
宇宙 电子 ,天 天 向 上 


需要 注意 的 是 ,text() 方 法 取得 的 结果 是 所 有 匹配 元 素 包 含 的 文本 组 合 起 来 的 纯 文 
本 内 容 , 这 个 方法 对 XML 文档 有 效 , 可 以 用 text() 
































方法 解析 XML 文档 元 素 的 文本 内 容 。 ee 
【 例 10-4】 操作 文本 内 容 , 本 例文 件 10-4. html || 久 fxz#n 室 x 

在 浏览 器 中 的 显示 效果 如 图 10-4 所 示 。 通过 text 0 方法 设置 的 文本 内 容 
代码 如 下 
人 图 10-4 例 10-4 的 页 面 显示 效果 


<title> 操 作文 本 内 容 < /title> 
< script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
< script type= "text/javascript"> 
$ (Gocument) .ready (function () { 
$ ("div") .text ("通过 text() 方 法 设置 的 文本 内 容 "); 
D; 
< /script> 
< /head> 
<body> 
<div> 
<p id "intro> 宇 宙 电 子 , 天 天 向 上 < /p> 
</div> 
< /pody> 
< /htm> 


【说 明 】 使 用 text() 方 法 重新 设置 div 元 素 的 内 容 后 ,div 元 素 原来 的 内 容 将 被 新 设 
置 的 内 容 替换 ,包括 原来 内 容 中 的 HTML 内 容 。 因 此 ,页 面 加 载 后 ,页 面 中 原来 设置 的 
段落 内 容 * 宇 宙 电 子 , 天 天 向 上 "将 被 替换 ,取而代之 的 内 容 是 “通过 text() 方 法 设置 的 文 
本 内 容 ”。 


2. 操作 HTML 内 容 


jQuery 提供 了 html() 和 html(val) 两 个 方法 用 于 对 HTML 内 容 进行 操作 。 其 中 
html() 用 于 获取 第 一 个 匹配 元 素 的 HTML 内 容 ,html(val) 用 于 设置 全 部 匹配 元 素 的 
HTML 内 容 。 例 如 ,在 一 个 HTML 页 面 中 ,包括 下 面 3 行 代码 。 

<div> 
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<p ic "intro"> 宇 窗 电 子 , 天 天 向 上 < /p> 
</div> 


要 获取 div 元 素 的 HTML 内 容 , 可 以 使 用 下 面 的 代码 。 

alert ($ ("div") .html ()); 

得 到 的 结果 如 图 10-5 所 示 , 可 以 看 出 消息 框 中 显示 的 是 div 元 素 的 HTML 内 容 
“<p id 一 "intro" 之 宇宙 电子 ,天 天 向 上 天 /p>”。 

用 户 可 以 重新 设置 div 元 素 的 HTML 内 容 , 结 果 如 图 10-6 所 示 。 代 码 如 下 : 

$ ("div") .html ("<p style= "border: lpx solid blue'> 通 过 html() 方 法 设置 的 HML 内 


容 < /> "); 
alert ($ ("div") .html ()); 



































[Eile 
[| 时 pwebvehlolo-5 简 mhtml DP-Cx| RS 
翁 操作 HTML 内 容 x 
宇宙 电子 ， 天 天 向 上 











图 10-5 获取 div 元 素 的 HTML 内 容 




















[EilealEd 
eae, 司 DAweb\ch10\10-5 简 例 重 新 设置 html Drox| ey 
已 扣 作 HTML 内 容 x 

















明 过 html 0 方法 设置 的 HTWL 内 容 











<p style="border: 1px solid blue:"> 通 过 html0 方 法 设置 的 HTML 内 
容 </p> 





图 10-6 重新 设置 HTML 内 容 后 获取 的 结果 


从 图 10-6 中 可 以 看 出 ,消息 框 中 显示 的 是 重新 设置 的 HTML 内 容 “ 二 p style 一 
Wborder:1px solid blue 一 通过 html() 方 法 设置 的 HTML 内 容 志 /p 二 ”, 并 且 浏 览 器 解析 
HTML 内 容 中 所 包含 的 HTML 代码 ,浏览 器 中 显示 出 蓝 色 边框 的 段落 内 容 * 通 过 html() 方 
法 设置 的 HTML 内 容 ”。 
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【 例 10-5】 操作 文本 内 容 和 HTML 内 容 , 本 例文 件 10-5. html 在 浏览 器 中 的 显示 效 
果 如 图 10-7 所 示 。 


目 ] DAweb\ch10\10-5.html 
低 反 作文 本 内 容 和 HTMLm 窜 x| | 


应 用 text () 方 法 设置 的 内 容 
《p style= border:lpx solid blue' > 通过 text () 方 法 设置 的 HDL 内 容 </p> 


























应 用 html () 方 法 设置 的 内 容 





吐 过 hto1 (0 方法 设置 的 机 ML 内 容 














图 10-7 获取 和 设置 元 素 的 文本 内 容 与 HTML 内 容 


代码 如 下 : 


<html> 
<head> 
<title> 操 作文 本 内 容 和 HIML 内 容 < /title> 
< script src= 门 s/jquery- 3.2.1.min.js" type= "text/javascript"> 
< /script> 
< Script type= "text/javascript"> 
$ (document) .ready (function() { 
$( 啡 divl") .text ("<p style= "border: lpx solid blue'> 通 过 text () 方 法 设置 
的 HEL 内 容 < /p> "); 
$ (div2") .html ("<p style= "border: lpx solid blue'> 通 过 htbml() 方 法 设置 
的 HEM 内容 < /> "); 
Ds; 
< /script> 
< /head> 
<body> 
应 用 text() 方 法 设置 的 内 容 
<div id "divi"> 
<p id "intro"> 宇 审 电 子 ,天 天 向 上 < /p> 
</div> 
<br/> 应 用 html() 方 法 设置 的 内 容 
<div id "div2"> 
<p ic "intro"> 宇 宙 电 子 ,天 天 向 上 < /> 
</div> 
< /body> 
< /htm> 


【说 明 】 从 运行 结果 可 以 看 出 ,应 用 text() 设 置 文本 内 容 时 ,即使 内 容 中 包含 
HTML 代码 ,也 将 被 认为 是 普通 文本 ,并 不 能 作为 HTML 代码 被 浏览 器 解析 ,仍然 按照 
原样 显示 ;而 应 用 html() 设 置 的 HTML 内 容 中 所 包含 的 HTML 代码 就 可 以 被 浏览 器 解 
析 , 因 此 ,文本 “通过 html() 方 法 设置 的 HTML 内 容 ? 带 有 蓝 色 边框 的 。 
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10.3.2 操作 元 素 的 值 


val() 方 法 用 于 设置 或 获取 元 素 的 值 , 当 元 素 允 许多 选 时 ,返回 一 个 包含 被 选项 的 数 

组 。jQuery 提供 了 3 种 对 元 素 的 值 操作 的 方法 , 见 表 10-4。 
表 10-4 对 元 素 的 值 操作 的 方法 

方 法 描 述 
用 于 获取 第 一 个 匹配 元 素 的 当前 值 ,返回 值 可 能 是 一 个 字符 串 ,也 可 能 是 一 个 数组 。 
例如 当 select 元 素 有 两 个 选中 值 时 ,返回 结果 就 是 一 个 数组 
val(val) 用 于 设置 所 有 匹配 元 素 的 值 
val(arrVal) | 用 于 为 check、select 和 radio 等 元 素 设置 值 ,参数 为 字符 串 数组 





val() 











【 例 10-6】 操作 元 素 的 值 。 页 面 加 载 后 ,在 文本 框 中 输入 祝福 语 , 单 击 “ 提 交 ” 按 钮 ， 
获取 文本 框 元 素 的 值 并 显示 在 页 面 中 ,本 例文 件 10-6. html 在 浏览 器 中 的 显示 效果 如 
图 10-8 所 示 。 


eo 司 DAweb\ch1O\10-6.html Dp- ox 
导 报 作 元 素 的 值 Ss 





















| Dweb\chiO\10-G.html 
全 雪 作 元 素 9 什 





























请 输入 祝福 语 请 输入 祝福 语 
字 雷 电子 ， 视 你 天 天 向上 ， 节 节 高 天 
GE] 


祝福 如 下 ， 宇宙 电子 ， 祝 你 天 天 向 上 ， 节 节 高 升 


乳 100% ~ 月 100% > 














图 10-8 ”操作 元 素 的 值 


代码 如 下 : 


<html> 

< head> 
<title> 操 作 元 素 的 值 < /title> 
< script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 

< /head> 

<body> 
<h3> 请 输入 祝福 语 < /h3> 
< input type= "text" value= "" id= "inputDiscuss" size="50" /><br/> 
< input type= "button" value= "提交 " onclick= "submitNewsDiscuss ()"/> 
<hr/> 
<div id "newsDiscuss"> 
</div> 
< script type= "text/javascript"> 

fimction submitNewsDiscuss () { 
Var inmputDiscuss=$ ("#inputDiscuss") .val (); 
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$ ( 啡 newsDiscuss") -html ("祝福 如 下 : "+ inputDiscuss); 
} 
< /script> 
< /body> 
< /htm> 
【说 明 】 上 述 代 码 中 ,使 用 val 〇 方法 可 以 获取 文本 框 元 素 的 值 。 单 击 “ 提 交 ” 按 钮 ， 
将 获取 的 值 显示 在 页 面 中 。 


104 操作 DOM 节 点 


根据 W3C 中 的 HTML DOM 标准 ,HTML 文档 的 所 有 内 容 都 是 节点 ,包括 文档 节 
点 ,元素 节点 ,文本 节点 、 属 性 节点 和 注释 节点 ;各 种 节点 相互 关联 ,共同 形成 了 DOM 树 。 

了 解 JavaScript 的 用 户 应 该 知道 ,通过 JavaScript 可 以 实现 对 DOM 节点 的 操作 ,但 
操作 起 来 比较 复杂 。jQuery 为 了 简化 开发 人 员 的 工作 ,提供 了 一 系列 方法 对 DOM 节点 
进行 各 种 操作 ,本 节 将 进行 详细 讲解 。 


10.4.1 创建 节点 


在 实际 应 用 中 ,常常 需要 动态 创建 HTML 页 面 内 容 , 使 HTML 页 面 根据 用 户 的 操 
作 在 浏览 器 中 呈现 不 同 的 显示 效果 ,从 而 达到 人 机 交互 的 目的 。 当 需要 在 页 面 中 添加 新 
内 容 时 ,就 需要 在 DOM 操作 中 进行 创建 节点 的 操作 。 

创建 节点 分 为 3 种 : 创建 元 素 节 点 、 创 建文 本 节点 和 创建 属性 节点 。 


1. 创建 元 素 节 点 


例如 要 创建 两 个 二 p 二 元素 节点 ,并 且 要 把 它们 作为 二 div 二 元 素 节 点 的 子 节点 添加 
到 DOM 节点 树 上 ,完成 这 个 任务 需要 两 个 步 又 。 

(1) 创建 两 个 新 的 二 p 二 元素 。 

(2) 将 这 两 个 新 元 素 插入 文档 中 。 

第 (1) 步 可 以 使 用 jQuery 的 工厂 函数 $ () 来 完成 ,格式 如 下 : 


$ html) 
$ (Chtml) 方 法 可 以 根据 传人 的 HTML 标记 字符 串 ,创建 一 个 DOM 对 象 ,并 且 将 这 


个 DOM 对 象 包装 成 一 个 jQuery 对 象 后 返回 。 
首先 ,创建 两 个 <p 二 元 素 ,jQuery 代码 如 下 : 


var $p 上 三 $(<p></e>"); ”// 创 建 第 1 个 p 元 素 
var Sp >$(<pP</"); // 创 建 第 2 个 p 元 素 ,文本 为 空 


然后 ,将 这 两 个 新 的 元 素 插入 文档 中 ,可 以 使 用 jQuery 中 的 append() 等 方法 (将 在 
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本 节 后 面 讲解 )。 具 体 的 jQuery 代码 如 下 : 


$ ("div") -append(Sp 1); // 将 第 1 个 p 元 素 添 加 到 giv 中 ,使 它 能 在 页 面 中 显示 
$ ("div") .append ($p_2); // 也 可 以 采用 链 式 写法 : $ ("div") .apgpend($p 1) .agpend($p 2); 


运行 代码 后 ,新 创建 的 一 p> 元 素 将 被 添加 到 页 面 中 。 
2. 创建 文本 节点 


两 个 二 p 二 元素 节 点 已 经 创建 完毕 并 插入 了 文档 中 ,此 时 需要 为 它们 添加 文本 内 容 。 
具体 的 jQuery 代码 如 下 : 

var $p ]=$("< 信 宇宙 电子 < /p>"); // 创 建 第 1 个 p 元 素 ,包含 元 素 节点 和 文本 节点 

var $p 大 $("<p> 新 闻 中 心 < /p>"); ”// 创 建 第 2 个 p 元 素 ,包含 元 素 节点 和 文本 节点 

$ ("div") .apgpend ($p 1); // 将 第 1 个 p 元 素 添加 到 div 中 ,使 它 能 在 页 面 中 显示 

$ ("div") .append(Sp 2)7 /将 第 2 个 p 元 素 添加 到 div 中 ,使 它 能 在 页 面 中 显示 

创建 文本 节点 就 是 在 创建 元 素 节点 时 直接 把 文本 内 容 写 出 来 ,然后 使 用 append() 等 
方法 将 它们 添加 到 文档 中 。 运 行 代 码 后 ,新 创建 的 二 p 二 元 素 将 被 添加 到 页 面 中 ,如 
图 10-9 所 示 。 


3. 创建 属性 节点 


创建 属性 节点 与 创建 文本 节点 类 似 ,也 是 直接 在 创建 元 素 节点 时 一 起 创建 。 具 体 
jQuery 代码 如 下 : 


// 创 建 第 1 个 p 元 素 ,包含 元 素 节 点 .文本 节点 和 属性 节点 以 titles ' 字 宙 电 子 ” 就 是 属性 节点 
var S$p ]=$("<p title= ' 宇 宙 电 子 '> 宇 宙 电 子 < /p> "); 

// 创 建 第 2 个 p 元 素 , 包 含 元 素 节 点 、 文 本 节点 和 属性 节点 title= "新闻 中 心 ”就 是 属性 节点 
var $p 2-$("<p title= ' 新 闻 中 心 人 > 新 闻 中 心 </p>m; 

$ ("div") .append($SP 1)7 /将 第 1 个 p 元 素 添加 到 div 中 ,使 它 能 在 页 面 中 显示 

$ ("div") .abpend(Sp 2)7 // 将 第 2 个 p 元 素 添加 到 div 中 ,使 它 能 在 页 面 中 显示 


运行 代码 后 ,将 鼠标 光标 移 至 文字 "宇宙 电子 ”上 , 即 可 看 到 title 信息 ,如 图 10-10 
所 示 。 
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宇宙 电子 
新 闻 中 心 


宇宙 电子 
新 闻 [ 记 = 于 





图 10-9 创建 文本 节点 图 10-10 创建 属性 节点 


10.4.2 插入 节点 


动态 创建 HTML 元 素 后 ,还 需要 将 新 创建 的 元 素 插入 HTML 文档 中 才 会 在 页 面 中 
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看 出 效果 。 将 新 创建 的 节点 插入 HTML 文档 最 简单 的 办 法 是 ,让 该 节点 作为 文档 中 已 
有 的 某 个 节点 的 子 节点 。 

jQuery 中 提供 了 append() 方 法 用 来 在 元 素 结尾 插 入 新 创建 的 节点 ,在 前 面 讲解 创建 
节点 时 已 经 使 用 了 这 个 方法 。 除 了 append() 方 法 ,jQuery 还 提供 了 其 他 几 种 插入 节点 的 
方法 。 插 人 节点 可 分 为 在 元 素 内 部 插入 和 在 元 素 外 部 插 人 两 种 。 


1. 在 元 素 内 部 插入 


在 元 素 内 部 插入 就 是 向 一 个 元 素 中 添加 子 元 素 和 内 容 ,jQuery 提供 了 如 表 10-5 所 示 
的 在 元 素 内 部 插入 的 方法 。 


表 10-5 在 元 素 内 部 插入 的 方法 

















方 法 描 述 
append(content) 为 所 有 匹配 的 元 素 的 内 部 追加 内 容 
appendTo( content) 将 所 有 匹配 元 素 添加 到 另 一 个 元 素 的 元 素 集合 中 
prepend(content) 为 所 有 匹配 的 元 素 的 内 部 前 置 内 容 
prependTo(content) 将 所 有 匹配 元 素 前 置 到 另 一 个 元 素 的 元 素 集合 中 


append() 方 法 与 prepend() 方 法 类 似 , 所 不 同 的 是 prepend() 方 法 将 添加 的 内 容 插 入 
原 有 内 容 的 前 面 。 
appendTo() 实 际 上 是 颠倒 了 append() 方 法 ,例如 下 面 这 名 代码。 


$ ("<E> RK /p> ") .appendro ("#B"); /将 指定 内 容 添加 到 这 为 B 的 元 素 中 
等 同 于 : 
$ (#B") .append ("< p> RK /p> "); // 将 指定 内 容 添加 到 ia 为 B 的 元 素 中 


append() 方 法 并 不 能 移动 页 面 上 的 元 素 ,而 appendTo() 方 法 是 可 以 的 ,例如 下 面 的 
代码 。 


$ (#B") -appendro ("#A"); // 移 动 B 元 素 到 A 元 素 的 后 面 


append() 方 法 是 无 法 实现 该 功能 的 ,注意 两 者 的 区 别 。 

需要 注意 的 是 ,prepend() 方 法 是 向 所 有 匹配 元 素 内 部 的 开始 处 插入 内 容 的 最 佳 方 
法 。prepend() 方 法 和 prependTo() 方 法 的 区 别 与 append() 方 法 和 appendTo() 方 法 的 区 
别 相同 。 

【 例 10-7】 在 元 素 内 部 插入 子 元 素 的 方法 ,本 例文 件 10-7. html 在 浏览 器 中 的 显示 
效果 如 图 10-11 所 示 。 

代码 如 下 : 


<html> 
<head> 
<title> 在 元 素 内 部 插入 子 元 素 的 方法 < /title> 
< script src= "js/jquery- 3.2.1.min.js" typer "text/javascript"> < /script> 
<script> 
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图 10-11 例 10-7 的 页 面 显示 效果 


$ (document) .ready (function() { 
$ ("button") .click (function () { 
$ ("Pp") .append("<kb> 网 站 导航 < /b> "); 
$ ("ol") .append("<1i> 友 情 链接 < /1i>"); 
Ds 
Ds 
< /script> 
< /head> 
<body> 
<button> 添 加 新 栏目 < /button> 
<g 户 宇宙 电子 :</p> 
<ol> 
<1i> 新 闻 中 心 </1i> 
<1i> 产 品 发 布 < /1i> 
<1i> 企 业 合作 < /1i> 
</ol> 
< /body> 
</htm> 


【说 明 】 上 述 代 码 中 , 单 击 * 添 加 新 栏目 ”按钮 向 段落 元 素 中 添加 了 文字 “网 站 导航 ”， 
向 列表 元 素 中 添加 了 列表 项 “友情 链接 ”。 


2. 在 元 素 外 部 插入 


在 元 素 外 部 插入 就 是 将 要 添加 的 内 容 添 加 到 元 素 之 前 或 元 素 之 后 ,jQuery 提供 了 如 
表 10-6 所 示 的 在 元 素 外 部 插入 的 方法 。 


表 10-6 在 元 素 外 部 插入 的 方法 

















方 法 描 述 
after(content) 在 每 个 匹配 的 元 素 之 后 插入 内 容 
insertAfter(Ccontent) 将 所 有 匹配 的 元 素 插 入 另 一 个 指定 元 素 的 元 素 集合 的 后 面 
before(Ccontent) 在 每 个 匹配 的 元 素 之 前 插入 内 容 
insertBefore(content) 把 所 有 匹配 的 元 素 插入 另 一 个 指定 元 素 的 元 素 集合 的 前 面 


【 例 10-8】 在 元 素 外 部 插入 元 素 的 方法 。 单 击 * 在 前 面 插 和 内容” 按钮 向 图 片 前 面 
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添加 文字 “智能 ”; 单 击 “ 在 后 面 插入 内 容 ” 按 钮 向 图 片 后 面 添加 文字 “机 器 人 ”。 本 例文 
件 10-8. html 在 浏览 器 中 的 显示 效果 如 图 10-12 所 示 。 


ee Dp-oxlr i Dp-oxlr es 
导 在 元 素 外 部 播 入 元 素 的 方法 x 从 在 元 素 外 部 插入 元 素 的 方法 x 
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[ERREE [ERGEXRa 


A 
智能 机 器 人 
rm [EGR 








起 1003%6 息 100% ~ 











图 10-12 例 10-8 的 页 面 显示 效果 


代码 如 下 : 


<html> 
< head> 
<title> 在 元 素 外 部 插入 元 素 的 方法 < /title> 
< script src="js/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
< Script> 
$ (document) .ready (function (){ 
$ (# btnbefore") .click(function () { 
$ ("img") .before("<I> 智 能 < /p> "); 
Ds; 
$ (#btnafter") .click (function() { 
$ ("img") .after (<b> 机 器 人 < /b> "); 
Ds; 
Ds; 
< /script> 
< [head> 
<body> 
< img src= "images/01.jpg"> <br> <br> 
<button id= "btnbefore"> 在 前 面 插入 内 容 < /button> 
<buttcn id= "btnafter> 在 后 面 插 和 内容 < /button> 
< /body> 
< /html> 


10.4.3 复制 节点 
在 jQuery 中 提供 了 clone() 方 法 ,用 于 复制 DOM 节点 (包含 节点 中 的 子 节点 、 文 本 
节点 和 属性 节点 ) 。 语 法 格式 如 下 : 


$ (selector) .clone (includeEvents [,despEvents]) 
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参数 说 明 如 下 。 
。 includeEvents( 可 选 ,布尔 类 型 ): 表示 是 否 同 时 复制 元 素 的 附加 数据 和 绑 定 事 
件 , 默 认为 false。 


。 deepEvents( 可 选 . 布 尔 类 型 ) : 表示 是 否 同 时 复制 元 素 中 的 所 有 子 元 素 的 附加 数 
据 和 绑 定 事 件 ,参数 deepEvents 默认 与 includeEvents 一 致 。 
【 例 10-9】 复制 节点 。 页 面 中 第 一 幅 图 像 不 可 复制 , 单 击 第 二 幅 图 像 及 其 复制 的 图 
像 都 可 以 复制 ,本 例文 件 10-9. html 在 浏览 器 中 的 显示 效果 如 图 10-13 所 示 。 
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第 二 幅 图 像 及 其 复制 的 图 像 都 可 以 复制 





























图 10-13 例 10-9 的 页 面 显示 效果 


代码 如 下 : 


<html> 
<head> 
<title> 复 制 节点 < /title> 
< script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
< script type= "text/javascript"> 
$ (fnction() { 
$ ("div img: eq(1)") bind ("click", function() { /为 按钮 绑 定 单 击 事件 
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$ (this) .clone (true) .insertAfter (this); // 复 制 自己 也 复制 事件 处 理 
Ds; 
D; 
</script> 
< /head> 
<body> 
<div> 
<h3> 第 一 幅 图 像 不 可 复制 < /h3> 
< img src= "images/01.jpg"> <br> 
<h3> 第 二 幅 图 像 及 其 复制 的 图 像 都 可 以 复制 < /h3> 
< img src= "images/02.jpg> 
</div> 
< /bodqy> 
< /htm> 
【说 明 】 上 述 代码 中 ,第 二 幅 图 像 使 用 了 clone(true) 的 方法 传递 true 参数 ,允许 同 
时 复制 元 素 及 其 事件 处 理 。 如 果 只 允许 复制 图 像 本 身 , 则 需要 使 用 clone() 不 加 参数 的 


方法 。 


10.4.4 删除 节点 


jQuery 提供 了 三 种 删除 节点 的 方法 ,分 别 是 remove() .detach() 和 empty() 方 法 。 
1. remove () 方 法 


remove() 方 法 用 于 从 DOM 中 删除 所 有 匹配 的 元 素 , 传 人 的 参数 用 于 根据 jQuery 表 
达 式 来 筛选 元 素 。 

当 使 用 remove() 方 法 删除 某 个 节点 之 后 ,该 节点 所 包含 的 所 有 后 代 节 点 将 同时 被 删 
除 。remove() 方 法 的 返回 值 是 一 个 指向 已 被 删除 的 节点 的 引用 ,以 后 也 可 以 继续 使 用 这 
些 元 素 。 代 码 如 下 : 

var $p 2=$ ("div p: eq(l)") .remove(); // 获 取 第 2 个 <p> 节 点 后 ,将 它 从 页 面 中 删除 

$ ("div") .apgpend ($p_2); // 把 删除 的 节点 重新 添加 到 div 中 

【 例 10-10】〗 使 用 remove() 方 法 删除 节点 。 页 面 中 有 3 行文 字 , 单 击 “ 删 除 第 3 行文 
字 ” 按 钮 删除 该 行文 字 , 本 例文 件 10-10. html 在 浏览 器 中 的 显示 效果 如 图 10-14 所 示 。 





































天 天 向 上 


节 节 高 逢 


删除 第 3 行文 字 











图 10-14 例 10-10 的 页 面 显示 效果 
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代码 如 下 : 


<htm> 
<head> 
<title> 删 除 节点 < /title> 
< script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
< script type= "text/javascript"> 
$ (document) .ready (function() { 
$ (#btnpelete") .click (function () { 
$ ("div p: eq(2)") -remove(7 // 删 除 第 3 行文 字 , 索 引号 为 2 
Ds; 
D; 
< /script> 
< /head> 
< body> 
<div> 
< 了 有 宇宙 电子 < /p> 
< 户 天 天 向 上 < /p> 
< 户 节 节 高 升 < /E> 
</div> 
< input type= "button" ic "btnpelete" value= " 咯 除 第 3 行文 字 " /> 
< /body> 
< /htm> 


2. detach () 方 法 


detach() 方 法 和 remove() 方 法 一 样 ,也 是 删除 DOM 中 匹配 的 元 素 。 需 要 注意 的 是 ， 
这 个 方法 不 会 把 匹配 的 元 素 从 jQuery 对 象 中 删除 ,因此 ,在 将 来 仍然 可 以 使 用 这 些 匹 配 
元 素 。 与 remove() 不 同 的 是 ,所 有 绑 定 的 事件 或 附加 的 数据 都 会 保留 下 来 。 

代码 如 下 : 

$ ("div p") .click (function() { 

alert ($ (this) .text ()); 

$p =$ ("div p: eq(l)") .detach(7 // 删 除 元 素 

$p_2.appengTo ("div"); 

使 用 detach() 方 法 删除 元 素 之 后 ,再 执行 *$ p_2. appendTo("div");? 重 新 追加 此 元 
素 , 之 前 绑 定 的 事件 还 存在 ,而 如 果 是 使 用 remove( ) 方 法 删除 元 素 , 再 重新 追加 元 素 , 之 
前 绑 定 的 事件 将 失效 。 

【 例 10-11】 使 用 detach( ) 方 法 删除 与 恢复 节点 。 页 面 中 有 3 行文 字 , 单 击 “ 删 除 第 
3 行文 字 ? 按 钮 删除 该 行文 字 ;: 单 击 “ 恢 复 第 3 行文 字 ? 按 钮 恢复 显示 该 行文 字 。 本 例文 
件 10-11. html 在 浏览 器 中 的 显示 效果 如 图 10-15 所 示 。 

代码 如 下 : 





<html> 
<head> 
<title> 删 除 与 恢复 节点 < /title> 
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图 10-15 例 10-11 的 页 面 显 示 效 果 


< Script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
< Script type= "text/javascript"> 
$ (document) .ready (function() { 
Var $p 37 
$ ( 啡 btnDelete") .click(finction () { 
$p 3$ ("div p: eq(2)") .detach(); 
/删除 第 3 行文 字 , 绑 定 的 事件 或 附加 的 数据 都 会 保留 下 来 
Ds; 
$ ("#btnRestore") .click (function () { 
$p_3.appendro ("div"); /重新 追加 元 素 S$p_ 3 恢复 被 删除 的 第 3 行文 字 
D; 
Ds; 
< /script> 
< /head> 
<body> 
<div> 
< 全 宇宙 电子 < /p> 
< 户 天 天 向 上 < /> 
< 户 节 节 高 升 < /E> 
</div> 
< input type= "button" ic "btnpelete" value= " 别 除 第 3 行文 字 " /> 
< input type= "button" id= "btnRestore" value= "恢复 第 3 行文 字 " /> 
< /pody> 
</htm> 


3. empty () 方 法 


empty() 方 法 用 于 清空 元 素 的 内 容 (包括 所 有 文本 和 子 节点 ) ,但 不 删除 该 元 素 。 
代码 如 下 : 


$ (divp: eq() 由 .empty0; ”// 获 取 第 2 个 p 元 素 后 ,清空 该 元 素 中 的 内 容 
运行 此 段 代码 后 ,第 2 个 二 p> 元 素 的 内 容 被 清空 ,但 第 2 个 二 p 二 元 素 还 存在 。 
【 例 10-12】 使 用 empty() 方 法 清空 元 素 的 内 容 。 页 面 中 定义 一 个 包含 链接 的 p 元 


素 和 一 个 按钮 , 单 击 “ 删 除 ” 按 钮 清空 p 元 素 的 内 容 及 其 链接 子 元 素 ,好像 p 元 素 被 删除 了 
一 样 。 本 例文 件 10-12. html 在 浏览 器 中 的 显示 效果 如 图 10-16 所 示 。 
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图 10-16 例 10-12 的 页 面 显示 效果 


代码 如 下 : 


<htm> 
<head> 
<title> 清 空 元 素 的 内 容 < /title> 
< script src= "js/jquery- 3.2.1.min.js" type= "text/javascript">< /script> 
< Script> 
$ (document) .ready (function() { 
$ (Putton") .click(function () { 
$ ("Pp") .empty (); //p 元 素 的 内 容 被 清空 了 ,但 p 元 素 还 在 
D; 
D); 
< /script> 
< head> 
<body> 
<P> 
欢迎 访问 <a href= "http://www-unidigital.co"> 宇 宙 电 子 < /a> 
< /pb> 
<button> 删 除 < /button> 
< /body> 
< /html> 


10.4.5 替换 节点 


如 果 要 替换 页 面 中 的 某 个 节点 元 素 ,可 以 使 用 jQuery 中 的 replaceWith() 方 法 和 
replaceAll() 方 法 。replaceWith() 方 法 和 replaceAll() 方 法 都 是 用 指定 的 HTML 内 容 或 
元 素 替 换 被 选 元 素 。 其 差异 在 于 内 容 和 选择 器 的 位 置 。 

1. replaceWith () 方 法 


replaceWith() 方 法 的 语法 格式 如 下 : 

$ (selector) .replaceWith (content) 

其 中 ,参数 selector 为 必 选 项 ,表示 要 替换 的 元 素 ;参数 content 也 是 必 选 项 ,表示 替 
换 被 选 元 素 的 内 容 , 其 可 能 的 值 包括 HTML 代码 、 新 元 素 .已 存在 的 元 素 , 已 存在 的 元 素 
不 会 被 移动 ,只 会 被 复制 。 
260 


第 10 章 “jQuery 的 基本 操作 





2. replaceAll () 方 法 


replaceAll() 方 法 也 可 用 指定 的 HTML 内 容 或 元 素 蔡 换 被 选 元 素 ,其 基本 语法 格式 
如 下 : 


$ (content) .replaceAll (selector) 


replaceAll() 方 法 用 于 使 用 匹配 的 元 素 替 换 所 有 selector 匹配 到 的 元 素 ;replaceWith() 
方法 用 于 将 所 有 匹配 的 元 素 蔡 换 成 指定 的 HTML 或 DOM 元 素 。 这 两 种 方法 的 功能 相 
同 ,只 是 两 者 的 表现 形式 不 同 。 

【 例 10-13】 使 用 replaceWith() 和 replaceAll() 替 换 方法 替换 页 面 元 素 。 页 面 中 定 
义 了 3 个 pp 元素.2 个 img 元 素 和 2 个 按钮 , 单 击 “replaceWith 替换 ?按钮 将 所 有 p 元 素 替 
换 成 蓝 色 边框 的 div 元 素 ; 单 击 “replaceAll 替换 ?按钮 将 所 有 img 元 素 替 换 成 加 粗 的 文 
字 。 本 例文 件 10-13. html 在 浏览 器 中 的 显示 效果 如 图 10-17 所 示 。 
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图 10-17 例 10-13 的 页 面 显示 效果 


代码 如 下 : 


<html> 
<head> 
<title> replaceWith() 和 replaceall() 替 换 方法 < /title> 
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< script src= 门 s/jquery 3.2.1.min.js" typer "text/javascript"> < /script> 
< script type= "text/javascript"> 
$ (Gocument) .ready (functicn (){ 
$ (#binRplWith") .click (function () { 
$ ("Pp") .replaceWith("< div> "+ 欢迎 您 1m+"< /div>"” ); 


// 将 所 有 pp 元素 蔡 换 成 div 元 素 


D; 
$("#bnRpIAll") .click(function () { 
$ ("<kb> 我 是 图 像 < /b> ") .replaceAll ("img"); 


// 将 所 有 inmg 元 素 蔡 换 成 加 粗 的 


< /script> 
< style> 
div{height: 20pxzborder: lpx solid blue;} 
</style> 
< /head> 
<body> 
< 户 宇 宙 电 子 < /p> 
< 户 天 天 向 上 < /p> 
< 户 节 节 高 升 < /p> 
< img src= "images/01.jpg"> < img src= "images/02.jpg"> 
<hr/> 
< input type= "button" id "btnRplWith" value= "replaoeWith 替换 " /> 
< input type= "button" id= "btnRplRAll" value= "replaceAll 替换 " /> 
< /pody> 
< /htm> 


10.4.6 查找 节点 


使 用 jQuery 选择 器 可 以 很 方便 地 匹配 满足 一 定 条 件 的 HTML 元 素 , 并 对 其 进行 操 


作 。 但 有 时 候 需 要 根据 HTML 元 素 的 具体 情况 对 其 进行 个 性 化 处 理 ,此 时 
方法 遍历 元 素 ,查找 到 满足 条 件 的 节点 。 语 法 格 


可 以 使 用 find() 





































































































式 如 下 : Lr 
结果 集 =find(sel ); 傅 使 用 find0 方 法 遍历 HTML.。 x 
工 号 性 别 
然后 ,就 可 以 使 用 for 语句 遍历 结果 集中 的 | 后 ”区 = | 和 
对 象 。 
【 例 10-14】 使 用 find() 方 法 遍历 HTML | 区 5 
元 素 ,本 例文 件 10-14. html 在 浏览 器 中 的 显示 效 | |oos a 
果 如 图 10-18 所 示 。 
代码 如 下 ， 图 10-18 例 10-14 的 页 面 显 示 效 果 
<html> 
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<head> 
<title> 使 用 find() 方 法 遍历 BML 元 素 < /title> 
< script src= 门 s/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
<script> 
$ (document) .ready (function () { 
var trs=$ ('#employees') .find('tr'); 
for(var i=0;i< trs.length;i++){ 
var to= $ (trs[i]) .find('td: nth- childq(3) 0)7 
证 (tdq.html0==' 男 ) { 
tahtml (< ing src= "imeges/male rg" widthe= "30" height= "30"/> '); 
} 
else if($ (td) .html()==' 女 ') { 
$ (td) .html ('< img src= "images/ferale.png" width= "30" 
height= "30"/> "); 


Ds 
< /script> 
< /heac> 
<body> 
< table id= "eployees" width= "300" border= "1"> 
<tw><tp> 工 号 </t><tt> 姓 名 </t><t> 性 别 </t><t> 年 龄 < /tr><t> 学 历 < /th> 


</t> 

<tr> 
< ta> 001< /td> 
<t 中 张 三 </td> 
<to 女 </to> 
<ta> 26c /td 
<t 中 本 科 < /to> 

< /tr> 

区 
<tdr> 002< /to> 
<t 中 李 四 < /td 
<td 男 < /td 
<to 32< /to> 
<t 中 中 专 < /to> 

< /tr> 

= 
<ta> 003< /td> 
<t 中 王 五 </td> 
<t 中 女 </td> 
<td> 35< /to> 
<td 本 科 < /td> 

< /tr> 

< /table> 
< /body> 
< /htm> 


【说 明 】 页 面 中 定义 了 一 个 显示 员工 信息 的 HTML 表格 employees, 然 后 使 用 find() 
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方法 遍历 表格 的 每 一 行 , 并 将 每 个 员工 的 性 别 ( 第 3 列 ) 替 换 成 相应 的 图 片 。 


105 操作 表单 元 素 


前 面 的 章节 已 经 详细 讲解 了 表单 的 工作 原理 及 表单 元 素 的 使 用 方法 ,本 节 重 点 讲解 
使 用 jQuery 操作 表单 元 素 的 方法 。 


10.5.1 操作 文本 框 


文本 框 是 表单 中 最 基本 也 是 最 常见 的 元 素 ,jQuery 操作 文本 框 的 主要 方法 如 下 。 
1. 获取 文本 框 的 值 
获取 文本 框 的 值 的 方法 如 下 : 
Var textCoor= $ (id") .val (); 
或 者 
Var textcon=$ (#1id") .attr ("value”) ; 
2. 设置 文本 框 的 值 
设置 文本 框 的 值 可 以 使 用 attr() 方 法 ,方法 如 下 : 
$( 叶 id") .attr ("alue", "要 设 定 的 值 "); 
3. 设置 文本 框 不 可 编辑 
设置 文本 框 不 可 编辑 的 方法 如 下 : 
$ (1d") .attr ("disabled", "disabled"); 
4. 设置 文本 框 可 编辑 
设置 文本 框 可 编辑 的 方法 如 下 : 
$ ("1d") .removeRttr ("disabled"); 


【 例 10-15】 jQuery 操作 文本 框 示 例 。 页 面 加 载 后 ,在 文本 框 中 输入 用 户 名 , 单 击 
“提交 ”按钮 ,消息 框 中 显示 用 户 名 的 信息 ; 单 击 消息 框 中 的 “确定 ”按钮 ,文本 框 变 为 不 可 
编辑 状态 ; 单 击 “ 修 改 ” 按 钮 ,文本 框 又 变 为 可 编辑 状态 。 本 例文 件 10-15. html 在 浏览 
中 的 显示 效果 如 图 10-19 所 示 。 

代码 如 下 : 


<html> 
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用 户 名 ， 王 小雪 用 户 名 : 匡 小 氏 用 户 名 : 斑 中 谨 























太 100% ~ 





100% ~ 














图 10-19 例 10-15 的 页 面 显示 效果 


<head> 
<title> jouery 操 作文 本 框 < /title> 
< Script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
< Script type= "text/javascript"> 
$ (document) .ready (function (){ 
$ (只 vbtn") .click(function (){ 
if($ (#testInpat") .val() !=""){ 
alert($ ( 叶 testInput") .val()); // 弹 出 文本 框 的 值 
$ ("# testInput") .attr ("disabled", "disabled"); 
// 将 文本 框 变 为 不 可 编辑 状态 
Jelse{ 
alert ("请 输入 文本 内 容 !1"); 
$ (#testInput") .focus(); // 将 焦点 设置 到 文本 框 处 
retum false; 
} 
Ds 
$ (#dbtn") .click (function() { 
if($ (# testInput") .attr ("disabled")== "disabled") { 
$ (# testInput") .removeAttr ("disabled"); 


// 移 除 文本 框 的 disapled 属 性 
} 
D; 
也 

< /script> 
< /head> 
<body> 

<h3> 请 输入 用 户 名 < /ha> 


用 户 名 : < input type= "text" name= "testInput" id= "testInput" /><br/><br/> 
< input type= "submit" name= "vbtn" id "vbtn" value= "提交 " /> grbsp; 
< input type= "button" name= "dbtn" id= "dbtn" value= "修改 " /> 
< /body> 
< /html> 


10. 5.2 操作 文本 域 


文本 域 的 属性 设置 、 值 的 获取 以 及 编辑 状态 的 修改 与 文本 框 都 相同 。 本 小 节 主 要 讲 
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解 一 个 文本 域 的 实际 应 pd 
【 例 10-16】 制作 一 个 高 度 可 变 的 留言 区 。 页 面 加 载 后 ,在 留言 区 文本 域 中 输入 留 
eh aspinoemo weweenpm 






















































































言 内 容 。 
高 度 减 小 。 本 例文 件 10-16. html 在 浏览 器 中 的 显示 效果 如 图 10-20 所 示 。 
国 bvwebelololp - Cx de Ge 司 bswebvhtotol O - OX 
生计 可 的 天 区 < EE x E 五 
高 度 可 变 的 留言 区 高 度 可 变 的 留言 区 高 度 可 变 的 留言 区 
四 到 匡 生 本 下 EA 
的 人 人 
下 的 管理 式 ， 以 科学 规范 的 管 区 的 来 短 ， 为 窟 户 和 管理 ， 务 实 高 为 客户 
和 区 人 
100% ~ R100% ~ 五 100%6 ~ 

















图 10-20 例 10-16 的 页 面 显示 效果 





代码 如 下 : 
<html> 
<head> 
<title> 高 度 可 变 的 留言 区 < /title> 
< script src= 门 s/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
<style> 
.message{width: 320px; font- size: 12px;border: lpx solid #000000;} 
.tt{padding: Spx;} 


‘msg_ top{margin- top: Spx;} 
#bigBtn{margin- left: 180px; font— size: 12px;} 
#smallBtin{margin- left: Spx;font- size: 12px;} 
# content {overflow: hidden;} 


</style> 
< script type= "text/javascript"> 
$ (Gocument) .ready (function() { 
Var $content=$ ("# content"); // 获 取 文 本 域 对 象 
// 放 大 按钮 单 击 事件 


$ ("#bigBtn") .click (function() { 
证 (!$content.is(": animated")) { // 是 否 处 于 动画 中 
if ($content.height ()< 210) { // 如 果 内 容 区 的 高 度 小 了 


// 将 文本 域 高 度 在 原来 的 基础 上 增加 70 
$oontent .animate ({height: "+=70"}, 500); 


F 210 可 以 继续 放大 





) 
$ (# smallBtn") .click (fnction () { // 钴 小 按钮 单 击 事件 
证 (Icontent.is(": animatedm){ // 是 否 处 于 动画 中 
if($content.height ()> 70) { // 如 果 内 容 区 的 高 度 大 于 70 可 以 继续 缩小 
// 将 文本 域 高 度 在 原来 的 基础 上 减少 70 
$content .animate ({height: "—=70"},500); 
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D) 
D 
</script> 
< /head> 
< body> 
<h3> 高 度 可 变 的 留言 区 < /h3> 
<div class= "message"> 
<div class= "msg top> 
< input type= "putton" value= "放大 " id "bigBtn"/> 
gribsp; gnbsp;< input type= "button" value= " 喻 小 " id= "gmallBtn"/> 
</div> 
<div class= "tt"> 
< textarea idF "content" rows= "4" cols= "45"> 宇 宙 电 子 采用 标准 化 …… (此 ”处 省 略 内 
容 ) 
< /textarea> 
</div> 
</div> 
< /body> 
< /htm> 


【说 明 】 单 击 “ 放 大 ”按钮 时 ,判断 文本 域 是 否 处 于 动画 中 ,如 果 没 有 处 于 动画 中 , 则 
判断 文本 域 的 高 度 是 否 小 于 210px, 小 于 210px 则 在 原来 基础 上 增加 70px; 单 击 “ 缩 小 ” 
按钮 时 ,仍然 先 判 断 文本 域 是 否 处 于 动画 中 ,如 果 没 有 处 于 动画 中 , 则 判断 文本 域 的 高 度 
是 否 大 于 70px, 大 于 70px 则 将 文本 域 高 度 在 原来 基础 上 减少 70px。 


10. 5.3 操作 单 选 按钮 和 复 选 杠 


通常 对 单 选 按钮 和 复 选 框 的 常用 操作 都 类 似 , 都 是 选中 .取消 选中 .判断 选择 状态 等 。 
1. 选中 单 选 按钮 和 复 选 杠 

使 用 attr() 方 法 可 以 设置 选中 的 单 选 按钮 和 复 选 框 ,方法 如 下 : 

$ ("id") .attr ("checked", true); 

2. 取消 选中 单 选 按 钮 和 复 选 框 

使 用 attr() 方 法 取消 选中 的 单 选 按钮 和 复 选 框 的 选中 ,方法 如 下 : 

$ ("hid") .removeRttr ("checked") ; 

3. 判断 选择 状态 

判断 单 选 按钮 和 复 选 框 的 选择 状态 ,方法 如 下 : 


if($ (id") ..attr ("checked")== 'checked') { 
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// 省 略 部 分 代码 
} 


【 例 10-17】 jQuery 操作 单 选 按钮 和 复 选 框 ,使 用 按钮 控制 单 选 框 和 复 选 框 的 选中 
状态 。 本 例文 件 10-17. html 在 浏览 器 中 的 显示 效果 如 图 10-21 所 示 。 
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图 10-21 例 10-17 的 页 面 显示 效果 


代码 如 下 : 


<html> 
<head> 
<title> jQuery 操作 单 选 按钮 和 复 选 框 < /title> 
< script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
< script> 
$ (document) .ready (function() { 
$ ("#lbtn") .click (function () { 
$ ("input [type= radio]") .eq(0) .attr (" ,true); 
) 7 
$ ( 啡 gbtn") .click(function (){ 
$ ("input [type= radio]") .eq(1) .attr ("checked", true); 
) 7 
$ (#checkAll") .click (function() { 
$ ("input [type= checkbox]") .attr (" ,true); 
); 
$ (# unCheckAll") .click (function() { 
$ ("input [type= checkbox]") .removeAttr ("checked") ; 





) 7 

$ ("# revBtn") .click(function (){ 

$ ("input [type= checkbox] ") .each (function () { 
this.checked= !this.dhecked; 

D; 





) 7 
$ (# subBtn") .click(function (){ 
var msg= "你 喜欢 的 产品 是 : \r\n"; 
$ ("input [type= checkbox] : checked") .each (function (){ 
msgt=$ (this) -val +"\r\n"; 
D; 
alert (msg); 
DD; 
]) 
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< /script> 
< /head> 
<body> 
< fom> 
<h3> 选 择 你 的 性 别 < /h3> 
< imput type= "radio" name= "fruit" value= " 胃 "和男 
< input type= "radio" name= "fruit" value=" 女 " /> 女 <br/> 
< input type= "button" id "Hbin" value=" 男 " /> anbsp;< input type= "button" 
ic "gobtn" value=" 女 " /> 
<hr> 
<h3 aligrr "center"> 选择 你 喜欢 的 产品 < /h3> 
< input type= "checkbox" name= "hobby" value= "机 器 人 > 机 器 人 
< input type= "checkbox" name= "hobby" value= "智能 家 居心 智能 家 居 
< input type= "checkbox" name= "hobby" value= "导航 仪 心 导航 仪 
<irput type= "dheckbow" nere= "hey value= "电子 摄像 机 > 电子 摄像 机 <br/><br/> 
< input type= "button" id= "checkAll" value= "全 选 "> grbsp; 
< input type= "button" id= "uncheckAl1" value= "全 不 选 "> gnbsp; 
< input type= "button" id= "revBtn" value= "反选 "> gnbsp; 
< input type= "button" ic "subptn" value= 提交 "> 
</form> 
< /body> 
< /htm> 


【说 明 】 

(1) 从 运行 结果 可 以 看 到 ,全 选 操作 就 是 将 复 选 框 全 部 选中 ,因此 ,为 “全 选 ” 按 钮 绑 
定单 击 事件 ,将 全 部 type 属性 为 checkbox 的 二 input 志 元素 的 checked 属性 设置 为 true。 
同 理 全 不 选 操作 是 将 全 部 type 属性 为 checkbox 的 二 input 过 元素 的 checked 属性 移 除 。 

(2) 反选 操作 相对 复杂 一 些 , 需 要 遍历 每 个 复 选 框 ,将 元 素 的 checked 属性 设置 为 与 
当前 值 的 相反 的 值 。 代 码 “this. checked 二 1this. checked;” 使 用 的 是 原生 JavaScript 的 
DOM 方法 ,this 为 JavaScript 对 象 ,而 非 jQuery 对 象 ,这 样 书写 更 加 地 简洁 易 懂 。 


10.5.4 操作 下 拉 框 


下 拉 框 的 常用 操作 包括 读 取 和 设置 控件 的 值 添加 菜单 项 和 清空 下 拉 菜 单 等 。 
1. 读 取 下 拉 框 的 值 

读 取 下 拉 框 的 值 可 以 使 用 val() 方 法 ,用 法 如 下 : 

Var selVal=$ (# id") .val (); 

2. 设置 下 拉 框 的 选中 项 

使 用 attr() 方 法 设置 下 拉 框 的 选中 项 ,用 法 如 下 : 

$ (中 id .attr("value", 选 中 项 的 值 ); 

3. 清空 下 拉 菜 单 


可 以 使 用 empty() 方 法 清空 下 拉 菜 单 , 用 法 如 下 : 
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if($ (id") .empty()7 

4. 向 下 拉 莱 单 中 添加 菜单 项 

可 以 使 用 append() 方 法 向 下 拉 菜 单 中 添加 菜单 项 ,用 法 如 下 : 
if($ (只 id") .append("< apticn value= ' 值 '> 文 本 < /apticn> "); 


【 例 10-18】 jQuery 操作 下 拉 框 ,使 用 按钮 控制 下 拉 框 的 常用 操作 。 本 例文 件 10-18 
.html 在 浏览 器 中 的 显示 效果 如 图 10-22 所 示 。 
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图 10-22 例 10-18 的 页 面 显示 效果 
代码 如 下 : 
<html> 
<head> 
<title> jouery 操 作 下 拉 框 < /title> 
<style> 


.first{float: left;font- size: 12px;} 

.Second{pacciing- left: 110px;font— size: 12px;} 

.Sel{width: 80px;height: 150px;} 

:sd{padding— top: 10px;} 
< /style> 
< script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
< script type= "text/javascript"> 


$ (function() { 
$ (Wadd") .click (function () { 
var $options=$ ( 啡 habby cption: selected"); ”// 获 取 左边 选中 项 
$options.appendTo ("4 other"); // 追 加 到 右边 


]) 
$ ("#add all") .click(finction() { 


Var $options=$ ( 啡 habby cption"); // 获 取 全 部 选项 
$options.appendTo ("4 other") ; // 追 加 到 右边 

D) 

$ ("#hobby") .dblclick (function() { // 鼠 标 双击 事件 
var $options=$ ("option: selected",this); // 获 取 选 中 项 
$options.appendTo ("4 other"); // 追 加 到 右边 


270 


第 10 章 jQuery 的 基本 操作 





]) 
$(#to left") -click(fancticn (){ 
var $options=$ ( 啡 other option: selected"); ”// 获 取 右 边 选中 项 


$options.appendTo ("#hocpy"); // 追 加 到 左边 
) 
$ ( 啡 al1 to left") .click(function() { 
Var $options=$ ("#0other option"); // 获 取 全 部 选项 
$options.appendTo ("# hobby"); // 追 加 到 左边 
) 
$ (#0other") .dblclick (finction () { // 鼠 标 双击 事件 
Var $options= $ ("option: selected",this); // 获 取 选 中 项 
$options.appendTo ("# hobby"); // 追 加 到 左边 
) 





]) 
< /script> 
< /head> 
<body> 
<div class= "first"> 
< select mltiple name= "hobby" id= "hobby" class= "sel"> 
< option value= 员 器 人 咏 机 器 人 < /option> 
< cption value=" 镶 能 家 居 > 智 能 家 居 < /option> 
< option value=" 导 航 仪 Ges"> 导 航 仪 Gps< /option> 
< cption value= "电子 摄像 机 "> 电子 摄像 机 < /option> 
< /select> 
<div class= "sd"> 
<button id "add> 添 加 >>< /button><br/> <br/> 
<button id= "aaa all"> 全 部 添加 >>< /button> 
</div> 
</div> 
<div class= "second"> 
< select mltiple name= "other" id= "other" class= "sel"> < /select> 
<div class= "sd"> 
<button id= "to_left"><< 删 除 < /button><br/><br/> 
<button id= "all to left"><< 全 部 删除 < /button> 
</div> 
</div> 
< /body> 
< /htm> 


10.5.5 表单 验证 


表单 是 HTML 中 非常 重要 的 部 分 , 当 用 户 通过 表单 注册 账户 、 登 录 系 统 时 ,只 有 所 

有 的 表单 数据 验证 通过 才能 向 服务 器 提交 数据 ,这 就 需要 jQuery 来 实现 表单 验证 。 
【 例 10-19】 jQuery 表单 验证 。 在 用 户 注册 表单 中 ,凡是 右 侧 添加 红色 “* ”号 的 选 
项 都 是 必须 填写 的 ,密码 框 除了 要 求 必 填 之 外 ,还 限制 密码 的 长 度 不 能 小 于 8 位 。 本 例文 
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图 10-23 例 10-19 的 页 面 显 示 效 果 
代码 如 下 : 
<html> 
<head> 
<title> jQuery 表单 验证 < /title> 
<style> 
.star{color: red;} 
dt {padding- top: 10px;} 
< script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
< script type= "text/javascript"> 
$ (function() { 
$ ("fom : inmput.required") .each (function() { 
Var $required $ ("< strong class= 'star'> * < /strong> "); // 创 建 元 素 
$ (this) .parent () .append($required); // 将 其 追加 到 文档 中 
]) 
$ ("fom : input") .blur (function (){ 
if($ (this) .is(#usemame")) { /判断 元 素 这 是 否 为 用 户 名 的 文本 杠 


if($ (this) -val()=="){ // 判 断 用 户 名 是 否 为 空 
alert ("用 户 名 不 能 为 空 1"); 


} 


if($ (this) .is(#pwd")) { // 判 断 是 否 为 密码 框 
if($ (this) -val ()==""){ // 判 断 密码 是 否 为 空 
alert ("密码 不 能 为 空 1"); 
} 
if(this.value.length< 8) { // 判 断 密码 的 长 度 是 否 小 于 8 


alert ("密码 不 能 小 于 8 位 ,请 重新 输入 !1"); 
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< /head> 
<body> 
<fom> 
<h3 aligr= "center"> 用 户 注册 < /h3> 
<div class="dt"> 
用 户 名 : < input type= "text" id "username" name= "username" size= 20 
class= "required" /> 
</div> 
<div class= "dt"> 
密 grbep;&rbep; 码 : < input type= "password" id= "pwd' name= "pwd" size= 
20 class= "required" /> 
</div> 
<div class= "dt"> 
电 grbsp;&nbsp; 话 :<input type= "text" id= "phone”" name= "phone" 
size= 11 maxlength= 11 /> 
</div> 
<div class= "dt"> 
地 snbsp;&nbsp; 址 : < input type= "text" id= "address" name= "address" 
size= 20 maxlength= 20 /> 
</div> 
<div class= "dt"> 
< input type= "submit" name= "sub" value= "注册 " /> 


</div> 
</form 
< /body> 
< /him> 
【说 明 】 当 鼠 标 光标 的 焦点 从 * 用 户 名 ”移出 时 ,需要 判断 用 户 名 是 否 符合 验证 规则 ， 


因此 要 给 元 素 添加 失去 焦点 事件 , 即 blur 事件 。 用 blur 事件 判断 用 户 名 和 密码 不 能 为 
空 , 并 且 密 码 不 能 小 于 8 位 。 


习 是 


1. 说 明 对 HTML 内 容 进行 操作 的 主要 步骤 。 
2. 简 述 对 元 素 CSS 样式 进行 操作 的 方法 。 
3. append() 方 法 和 appendTo() 方 法 的 区 别 有 哪 些 ? 
4. 简 述 创建 DOM 节点 的 过 程 。 
5. 描述 删除 DOM 节点 的 几 种 方法 以 及 具体 如 何 实现 。 
6. 简 述 replaceWith() 方 法 和 replaceAll() 方 法 在 进行 节点 替换 时 的 区 别 。 
7. 简 述 如 何 控制 复 选 框 的 全 选 、 全 不 选 和 反选 。 
8. 使 用 删除 元 素 属性 的 removeAttr() 方 法 实现 按钮 控制 文本 框 的 可 编辑 性 , 单 击 
“启用 ”按钮 ,文本 框 恢复 可 编辑 性 ,如 图 10-24 所 示 。 
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10-24 题 8 图 


9. 使 用 复制 节点 的 方法 实现 单 击 页 面 中 的 “新 闻 中 心 "文字 ,可 以 复制 节点 的 内 容 及 
事件 处 理 , 如 图 10-25 所 示 。 
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图 10-25 题 9 图 


10. 使 用 操作 CSS 样式 的 方法 实现 按钮 控制 图 像 的 缩放 ,如 图 10-26 所 示 。 
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11. 使 用 操作 表单 元 素 的 方法 制作 如 图 10-27 所 示 的 表单 。 
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JavaScript 和 HTML 页 面 之 间 的 交互 是 通过 用 户 和 浏览 器 操作 页 面 时 引发 的 事件 
来 实现 的 , 当 页 面 中 的 元 素 状态 由 于 用 户 的 操作 或 其 他 原因 发 生变 化 时 ,浏览 器 会 自动 生 
成 一 个 事件 。 虽然 利用 传统 的 JavaScript 事件 处 理 方 式 可 以 完成 这 些 交互 ,但 jQuery 中 
增加 并 扩展 了 事件 处 理 机 制 , 极 大 地 增强 了 事件 处 理 能 力 。 





11.1 jQuery 中 的 事件 处 理 机 制 





事件 处 理 程序 是 当 HTML 页 面 中 发 生 某 些 事件 时 所 调用 的 方法 ,jQuery 事件 处 理 
方法 是 jQuery 中 的 核心 函数 ,jQuery 通过 DOM 为 元 素 添加 事件 。 

以 浏览 器 加 载 HTML 页 面 事件 为 例 ,在 传统 的 JavaScript 代码 中 ,将 触发 window. 
onload() 事 件 , 而 在 jQuery 中 使 用 的 是 $ (document). ready() 方 法 。 通 过 使 用 该 方法 ， 
可 以 在 DOM 载 入 就绪 时 对 其 进行 操作 ,并 调用 执行 其 所 绑 定 的 函数 ,这 样 可 以 极 大 地 提 
高 Web 页 面 的 响应 速度 。 

传统 的 JavaScript 事件 处 理 程序 代码 如 下 : 


< input type= "button" id= "btn" value= " 单 击 " onclick()= "showMsg ();"/> 
< script type= "text/javascript"> 
function showMsg () { 
alert ("这 是 显示 的 信息 "); 
} 
< /script> 


在 上 述 代码 中 ,是 通过 为 input 元 素 添加 onClick 属性 的 方式 来 添加 事件 的 ,这 种 通 
过 添加 元 素 属性 来 设置 事件 处 理 程序 的 方式 是 传统 JavaScript 中 常用 的 事件 处 理 方式 。 

在 jQuery 中 ,最 基本 的 事件 处 理 机 制 是 通过 修改 DOM 属性 的 方式 添加 事件 ,代码 
如 下 : 








< input type= "button" id "btnl" value= 哇 击 " /> 
< script type= "text/javascript"> 
fanction shoaMsg() { 
alert ("这 是 显示 的 信息 "); 
} 
$ (function() { 
document .getElementById ("btn1") .onclick= shouMsg; 
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在 上 述 代 码 中 ,是 通过 修改 id 为 btnl 的 DOM 元 素 的 onclick 属性 进行 事件 添加 的 。 

jQuery 中 的 事件 方法 会 触发 匹配 元 素 或 将 函数 绑 定 到 所 有 匹配 元 素 的 某 个 事件 。 
事件 触发 的 示例 代码 如 下 : 

$("button# test") .click() 

上 述 代码 将 触发 id= "test" 的 button 元 素 的 click 事件 。 设 置 完事 件 的 触发 方法 后 ， 
可 以 定义 绑 定 函数 ,示例 代码 如 下 : 

$ ("Putton# test") .click (function() {$ ("img") .hige()}) 

上 述 代码 表示 会 在 单 击 id= "test" 的 按钮 时 隐藏 所 有 图 像 。 

在 jQuery 中 ,对 于 各 种 不 同 的 事件 定义 了 不 同 的 事件 处 理 方法 , 见 表 11-1。 

表 11-1 jQuery 中 的 常用 事件 处 理 方法 






























































方 ”法 描 述 

bind() 向 匹配 元 素 附 加 一 个 或 更 多 事件 处 理 器 

blur() 和 触发 或 将 函数 绑 定 到 指定 元 素 的 blur 事件 ,在 元 素 失去 焦点 时 触发 

change 和 触发 或 将 函数 绑 定 到 指定 元 素 的 change 事件 ,在 元 素 的 值 改变 并 失去 
焦点 时 触发 

click() 触发 或 将 函数 绑 定 到 指定 元 素 的 click 事件 ,在 元 素 上 单 击 时 触发 

dblclick() 触发 或 将 函数 绑 定 到 指定 元 素 的 double click 事件 ,在 元 素 上 双击 触发 

delegate() 向 匹配 元 素 的 当前 或 未 来 的 子 元 素 附 加 一 个 或 多 个 事件 处 理 器 

event, isDefaultPrevented() | 返回 event 对 象 上 是 否 调用 了 event. preventDefault() 

event. preventDefault() 阻止 事件 的 默认 动作 

event. result 包含 由 被 指定 事件 触发 的 事件 处 理 器 返回 的 最 后 一 个 值 

event. target 触发 该 事件 的 DOM 元 素 

event. timeStamp 该 属性 返回 从 1970 年 1 月 1 日 到 事件 发 生 时 的 毫秒 数 

event. type 描述 事件 的 类 型 

event. which 指示 按 了 哪个 键 或 按钮 

focus() 触发 或 将 函数 绑 定 到 指定 元 素 的 focus 事件 ,在 元 素 获 得 焦点 时 触发 

keydown() 触发 或 将 函数 绑 定 到 指定 元 素 的 key down 事件 , 当 键 盘 按 下 时 触发 

keypress() 触发 或 将 函数 绑 定 到 指定 元 素 的 key press 事件 

keyup() 和 触发 或 将 函数 绑 定 到 指定 元 素 的 key up 事件 ,会 在 按键 释放 时 触发 

live() 为 当前 或 未 来 的 匹配 元 素 添加 一 个 或 多 个 事件 处 理 器 

joadcy 触发 或 将 本 数 绑 定 到 指定 元 素 的 load 事件 .元素 内 容 完全 加 载 完毕 后 
触发 

人 触发 或 将 函数 绑 定 到 指定 元 素 的 mouse down 事件 .鼠标 光标 在 元 素 
上 单 击 后 触发 
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方 


描 述 





mousemove() 


触发 或 将 函数 绑 定 到 指定 元 素 的 mouse move 事件 ,鼠标 光标 在 元 素 
上 移动 时 触发 





mouseout() 


触发 或 将 函数 绑 定 到 指定 元 素 的 mouse out 事件 ,鼠标 光标 从 元 素 上 
离开 时 触发 





mouseover() 


触发 或 将 函数 绑 定 到 指定 元 素 的 mouse over 事件 ,鼠标 光标 移 人 对象 
时 和 触发 





和 触发 或 将 函数 绑 定 到 指定 元 素 的 mouse up 事件 ,鼠标 光标 单 击 对 象 释 


























mouseup() 放 时 
one() 向 匹配 元 素 添加 事件 处 理 器 ,每 个 元 素 只 能 触发 一 次 该 处 理 器 
ready() 文档 就 绪 事 件 ( 当 HTML 文档 就 绪 可 用 时 ) 
. 触发 或 将 函数 绑 定 到 指定 元 素 的 resize 事件 , 当 文 档 窗口 改变 大 小 时 
Tesize() 本 
和 触发 
触发 或 将 函数 绑 定 到 指定 元 素 的 scroll 事件 , 当 滚 动 条 发 生变 化 时 
scroll() 
触发 
eects 触发 或 将 函数 绑 定 到 指定 元 素 的 select 事件 , 当 用 户 在 文本 框 选中 某 
段 文 本 时 触发 
submit() 触发 或 将 函数 绑 定 到 指定 元 素 的 submit 事件 
unbind() 从 匹配 元 素 移 除 一 个 被 添加 的 事件 处 理 器 
onde 和 触发 或 将 函数 绑 定 到 指定 元 素 的 unload 事件 ,在 元 素 印 载 时 触发 该 





事件 


需要 说 明 的 是 ,jQuery 中 的 事件 处 理 程序 方法 比 传统 的 JavaScript 事件 句柄 属性 少 
了 on。 例 如 , 单 击 事件 在 jQuery 中 对 应 的 是 click() 方 法 ,而 在 JavaScript 中 对 应 的 是 


onclick() 方 法 。 


112 页 面 加 载 响应 事件 


在 jQuery 中 , $ (document). ready() 方 法 用 于 处 理 页 面 加 载 完 毕 时 的 事件 ,该 方法 
是 事件 模块 中 最 重要 的 一 个 函数 , 它 极 大 地 提高 了 Web 响应 的 速度 。 
$ (document) 获 取 的 是 整个 文档 对 象 。 方 法 的 书写 格式 如 下 : 


$ (document) .ready (functicn () { 





// 程 序 代 码 


Ds; 


可 以 简写 为 : 


$() .ready (function() { 


277 


Web 前 端 开发 实例 教程 一 HIM 5+ JavaScript + jQuery 





当 $ () 不 带 参 数 时 ,默认 的 参数 就 是 document, 所 以 $ 0) 是 $(document) 的 简写 


未 


ws 
还 可 以 进一步 简写 为 : 
$ (functicn() { 


// 程 序 代码 
Ds; 


在 jQuery 中 ,可 以 使 用 $ (document). ready() 方 法 代替 传统 的 window. onload( ) 方 
法 ,该 方法 与 window. onload() 方 法 功能 相似 ,但 是 在 执行 时 机 方面 是 有 区 别 的 。 

window. onload() 方 法 是 页 面 中 所 有 元 素 (包括 与 元 素 关 联 的 外 部 资源 文件 ) 完 全 加 
载 到 浏览 器 后 执行 的 , 此 时 JavaScript 可 以 访问 页 面 中 的 所 有 元 素 。 而 利用 
$ (document), ready() 方 法 注册 的 事件 处 理 程 序 , 在 页 面 对 应 的 DOM 结构 就 绪 时 就 可 
以 被 调用 。 此 时 ,页 面 中 的 元 素 对 于 jQuery 而 言 是 可 以 访问 的 ,但 是 ,这 并 不 意味 着 与 元 
素 相关 联 的 外 部 资源 文件 全 部 下 载 完毕 。 例 如 ,一 个 包含 很 多 图 片 的 页 面 ,如 果 利 用 
window. onload() 方 法 , 则 必须 等 到 所 有 图 片 都 加 载 完 毕 后 才 可 以 进行 操作 。 如 果 利 用 
jQuery 中 的 $ (document). ready() 方 法 ,只 需要 DOM 就 绪 就 可 以 操作 了 ,不 需要 等 待 所 
有 图 片 下载 完 毕 。 

window. onload() 与 $ (document). ready() 另 一 个 主要 不 同体 现在 ,使 用 window. 
onload() 方 法 多 次 绑 定 事件 处 理 函 数 时 ,只 保留 最 后 一 个 ,执行 结果 也 只 有 一 个 ; 而 
$ (document),. ready() 人 允许 多 次 设置 处 理事 件 ,事件 执行 结果 会 相继 输出 。 代 码 如 下 : 


// 第 一 次 设置 页 面 加 载 事件 处 理 

$ (document) .ready (function () { 
alert(" 第 一 次 执行 7; 

D; 

// 第 二 次 设置 页 面 加 载 事件 处 理 

$ (document) .ready (function () { 
alert(" 第 二 次 执行 9; 


上 述 代码 运行 时 ,会 连续 弹出 “第 一 次 执行 "和 “第 二 次 执行 "的 提示 信息 。 


11.3 jQuery 中 的 事件 绑 定 





所 谓 事件 绑 定 , 是 指 将 页 面 元 素 的 事件 类 型 与 事件 处 理 函 数 关联 到 一 起 , 当 事 件 触发 
时 调用 事先 绑 定 的 事件 处 理 函 数 。 在 jQuery 中 ,提供 了 强大 的 API 来 执行 事件 的 绑 定 
操作 ,例如 bind() .one() .delegate() .on() 等 。 
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11.3.1 bind () 方 法 绑 定 事 件 


bind() 方 法 用 于 对 匹配 元 素 的 特定 事件 绑 定 的 事件 处 理 函 数 。 语 法 格式 如 下 : 
bind(types [data], 名) 

参数 说 明 如 下 。 

。 types: 表示 事件 类 型 ,是 一 个 或 多 个 事件 类 型 构成 的 字符 串 。 


。 data( 可 选 ): 表示 传递 给 函数 的 额外 数据 ,在 事件 处 理 函 数 中 通过 event. data 来 
获得 所 传人 的 额外 数据 。 


。， fn: 这 是 指 所 绑 定 的 事件 处 理 函 数 。 


例如 ,为 普通 按钮 绑 定 一 个 单 击 事件 ,用 于 在 单 击 该 按钮 时 弹出 提示 对 话 框 , 可 以 使 
用 下 面 的 代码 。 


$ ("input :button") .bind ("click", function() {alert ("按钮 单 击 事件 ");}); 


【 例 11-1】 使 用 bind() 方 法 为 页 面 中 的 标题 元 素 绑 定 click 事件 ,触发 click 事件 时 
显示 隐藏 的 div 内 容 。 本 例文 件 11-1. html 在 浏览 器 中 的 显示 效果 如 图 11-1 所 示 。 


占 bswebwhllvll-lntml - 2 [as 司 OAweb\chl\1-Lhtm 
bnd0NE > 


| bnd0 EW 
字 宙 电子 经 营 宗旨 






































字 宙 电子 经 营 宗 由 








图 11-1 例 11-1 的 页 面 显 示 效 果 
代码 如 下 : 


<html> 
<head> 
<title>bind( 方 法 绑 定 事 件 < /title> 
< style> 
#content{ 
border: 6Gpx double blue; // 双 线 蓝 色 边框 
display: none; // 软 认 隐 藏 
} 
</style> 
< script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
< script type= "text/javascript"> 
$ (document) .ready (function () { 
$ (#4wrap h3.title") .bind ("click", finction() { 
// 使 用 binda() 方 法 为 b3 元 素 绑 定 click 事 件 
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$ (this) -next() .show (); 


Ds; 
</script> 
< /head> 
<body> 
<div id "wrap"> 
<h3 class= "titler> 宇 宙 电 子 经 营 宗旨 < /h3> 
<div ji 中 "oontent> 宇 宙 电 子 采用 标准 化 和 定制 化 服务 相 结合 …… 尼 处 省 略 文字 ) 
</div> 
</div> 
< /pody> 
< /htm> 


【说 明 】 在 上 面 的 代码 中 ,使 用 bind() 方 法 实现 为 id 为 wrap 的 二 div 之 标记 下 的 h3 
元 素 绑 定 click 事件 ,使 其 被 单 击 时 显示 下 方 隐藏 
的 二 div 二 元 素 的 内 容 。 ee 司 DAwebvchll\ll-2 DP- OX 
【 例 11-2】 使 用 bind() 方 法 禁止 网 页 弹出 右 |[ bind0 坟 ras 二 > 
键 菜单 ,本 例文 件 11-2. html 在 浏览 器 中 的 显示 效 | 右键 单 击 网 页 ， 不 会 弹出 右键 菜单 
果 如 图 11-2 所 示 。 





























代码 如 下 : 态 100% > 
<htm> 图 11-2 例 11-2 的 页 面 显示 效果 
<head> 


<title> bind() 方 法 禁止 网 页 弹出 右键 菜单 < /title> 
< script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
< script type= "text/javascript"> 
$ (document) .ready (function() { 
$ (document) .bind ("contextmenu", function (e) { 
retum false; 
D; 
D; 
< /script> 
< /head> 
<body> 
< 了 BE 右键 单 击 网 页 ,不 会 弹出 右键 菜单 < /p> 
< /body> 
</htm> 


【说 明 】 在 bind() 方 法 中 指定 contextmenu( 右 击 ) 事 件 的 处 理 函 数 返 回 false, 从 而 
取消 了 事件 的 默认 行为 。 
11.3.2 one () 方 法 绑 定 事件 


one() 方 法 为 每 一 个 匹配 元 素 的 特定 事件 绑 定 一 个 一 次 性 的 事件 处 理 函 数 ,事件 处 理 
函数 只 会 被 执行 一 次 。 语 法 格式 如 下 : 
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ne (types, [data], fn) 


参数 说 明 等 同 于 bind() 方 法 的 参数 说 明 , 这 里 不 再 袭 述 。 

例如 ,要 实现 只 有 当 用 户 第 一 次 单 击 匹配 的 div 元 素 时 ,弹出 提示 对 话 框 显示 div 元 
素 的 内 容 , 可 以 使 用 下 面 的 代码 。 

$ ("div") .one ("click", function(){ 

alert ($ (this) .text ()); // 在 弹出 的 消息 框 中 显示 div 元 素 的 内 容 

Ds; 

【 例 11-3】 使 用 one() 方 法 为 页 面 中 两 个 段落 元 素 绑 定 一 次 性 click 事件 , 单 击 段 落 
时 放大 段落 的 字体 ,每 个 段落 只 能 放大 一 次 字体 。 本 例文 件 11-3. html 在 浏览 器 中 的 显 
示 效 果 如 图 11-3 所 示 。 


El) Dweb\ch11\11-3.html pr-ox| 
名 one0 方 法 地 十 事件 x 


这 是 一 个 段落 。 
这 是 另 一 个 段落 。 
请 单 击 p 元 素 增加 其 内 容 的 文本 大 小 。 每 个 p 元 素 只 会 触发 一 次 改 事件 。 










































| 司 DAweb\chl1\11-3.html pr-roxB ee 
优 one( 方 法 地 定 事件 x jl 


这 是 一 个 段落。 
这 是 另 天 个 段 洲 。 
请 单 击 p 元 素 增加 其 内 容 的 文本 大 小 。 每 个 p 元 素 只 会 触发 一 次 改 事件 。 











态 100% ~ 








图 11-3 例 11-3 的 页 面 显 示 效 果 


代码 如 下 : 


<htm> 
<head> 
<title> one() 方 法 绑 定 事件 < /title> 
< script src= "js/jquery-— 3.2.1.min.js" type= "text/javascript"> < /script> 
< script type= "text/javascript"> 
$ (Gocument) .ready (function() { 
$ ("Pp") .one("click",function(){ /one() 方 法 为 页 面 中 的 段落 元 素 绑 定 一 次 性 click 事 件 
$ (this) .animate ({fontsize: 叶 = Gox") 7 // 放 大 字体 
Ds; 
Ds; 
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<body> 
< 户 这 是 一 个 段落 。< /> 
< 户 这 是 另 一 个 段落 。< /p> 
< 户 请 单 击 p 元 素 增加 其 内 容 的 文本 大 小 。 每 个 p 元 素 只 会 触发 一 次 改 事件 。< /p> 
< /pody> 
< /html> 
【说 明 】 在 上 面 的 代码 中 ,使 用 one() 方 法 为 页 面 中 的 p 元 素 绑 定 一 次 性 click 事 
件 , 每 个 p 元 素 只 会 触发 一 次 click 事件 。 


11.3.3 ” delegate () 方 法 绑 定 事件 


delegate() 方 法 可 以 在 匹配 元 素 的 基础 上 ,对 其 内 部 符合 条 件 的 元 素 绑 定 事件 处 理 函 
数 。 语 法 格式 如 下 : 

delegate (childselector, [types], [data] ,fn) 
其 中 ,参数 childSelector 是 一 个 选择 器 字符 串 ,用 于 筛选 触发 事件 的 元 素 。 其 余 参数 等 同 
于 bind() 方 法 的 参数 说 明 ,这 里 不 再 袭 述 。 

例如 ,要 实现 只 有 当 用 户 第 一 次 单 击 匹 配 的 div 元 素 时 ,弹出 提示 对 话 框 显示 div 元 
素 的 内 容 , 可 以 使 用 下 面 的 代码 。 

$ ("div") .one ("click", function() { 

alert ($ (this) .text ()); // 在 弹出 的 消息 框 中 显示 div 元 素 的 内 容 

D; 

【 例 11-4】 使 用 delegate() 方 法 为 页 面 中 的 段落 元 素 绑 定 click 事件 , 单 击 段落 时 在 
其 后 插入 一 个 新 的 段落 。 本 例文 件 11-4. html 在 浏览 器 中 的 显示 效果 如 图 11-4 所 示 。 


和 DAwebvhll\ll-4.html PD - OX Dweb\chll\11-4.html PD - © x 
导 delegate0 方 法 绑 定 事件 。 x 铬 delegate(0 方 法 铸 定 事件 。 x 


单 击 我 ! 单 击 我 ! 


















































这 是 一 个 新 段落 ! 








图 11-4 例 11-4 的 页 面 显示 效果 


代码 如 下 : 


<html> 
<head> 
<title> delegate() 方 法 绑 定 事件 < /title> 
< style> 
p{background: yellow; font- weight: bold; cursor: pointer;padding: Spx;} 
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</style> 
< script src= 门 s/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
< Script type= "text/javascript"> 
$ (Gocument) .ready (function() { 
$ ("pody") .delegate ("p", "click", function(){ /delegate() 方 法 为 p 元 素 的 绑 定 click 事 件 
$ (this) .after("<P> 这 是 一 个 新 段落 !< /p> "); 
// 单 击 p 元 素 时 在 其 后 插入 一 个 p 元 素 字 
符 串 
D; 
D; 
< /script> 
< /head> 
< body> 
< 户 单 击 我 !< /p> 
< /body> 


【说 明 】 在 上 面 的 代码 中 ,使 用 delegate() 方 法 将 body 元 素 的 p 子 元 素 的 click 事 
件 绑 定 到 指定 的 事件 处 理 函 数 , 单 击 p 元 素 时 在 其 后 插入 一 个 p 元 素 字符 串 “ 这 是 一 个 新 
段落 1”。 


11.3.4 on OQ 方法 绑 定 事件 


使 用 bind() 方 式 绑 定 事件 时 ,只 能 针对 页 面 中 存在 的 元 素 进 行 绑 定 , 而 bind() 绑 定 
后 新 增 的 元 素 上 没有 事件 响应 。 使 用 on() 方 法 能 够 为 页 面 所 有 匹配 元 素 绑 定 事件 ,包含 
存在 的 元 素 和 将 来 新 增 的 元 素 。 语 法 格式 如 下 : 


on (childselector, [types], [data] ,fn) 


其 中 ,参数 childSelector 是 一 个 选择 器 字符 串 , 用 于 筛选 触发 事件 的 元 素 。 其 余 参 数 等 同 
于 bind() 方 法 的 参数 说 明 ,这 里 不 再 袭 述 。 

【 例 11-5】 使 用 on() 方 法 实现 页 面 中 的 事件 绑 定 。 页 面 中 包含 2 个 段落 和 1 个 按 
钮 ,使 用 on() 方 法 为 段落 绑 定 click 事件 实现 滑动 隐藏 。 单 击 按钮 ,在 按钮 后 面 添加 新 段 
落 ,新 增 的 段落 同样 可 以 使 用 老 段 落 绑 定 的 事件 ;: 单 击 新 段落 ,新 段落 同样 隐藏 了 。 本 例 
文件 11-5. html 在 浏览 器 中 的 显示 效果 如 图 11-5 所 示 。 












































[= -En =- 
站 DAweb\chl1\1-5 DP- OX 司 DAwebvchllMll5 Pr Ox) 
情 on0 方 法 8 定 事 件 x | 你 on0 方 法 纤 定 事件 * 
这 是 一 个 段落 。 这 是 一 个 段落 。 
单 击 任意 p 元 素 会 令 其 消失 。 包 括 本 段落 。 单 击 任意 p 元 素 会 令 其 消失 。 包 括 本 段落 。 
E 
这 是 一 个 新 段落 。 
= 1l00% > 本 R100% 7 














图 11-5 例 11-5 的 页 面 显示 效果 
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代码 如 下 : 


<htm> 
<head> 
<title> on() 方 法 绑 定 事件 < /title> 
< script src= 门 s/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
< script type= "text/javascript"> 
$ (document) .ready (functicn (){ 
$ ("body") .on("click","p",function(){ // 单 击 段落 


$ (this) .sligeToggle (); // 该 段落 滑动 隐藏 
Ds; 
$ ("button") .click (function () { // 单 击 按钮 
$ (<g 户 这 是 一 个 新 段落 。< /p> ") .insertAfter ("button"); 
// 在 按钮 后 面 创建 新 的 p 元 素 
Ds; 
D; 
< /script> 
< /head> 
<body> 


< 户 这 是 一 个 段落 。< /E> 
< 户 单 击 任意 p 元 素 会 令 其 消失 。 包 括 本 段落 。< /p> 
<button> 在 本 按钮 后 面 插入 新 的 p 元 素 < /button> 
< /body> 
< /html> 
【说 明 】 
(1) 在 上 面 的 代码 中 , 单 击 按钮 创建 了 新 的 p 元素 。 对 于 这 些 新 创建 的 p 元素 ,同样 
可 以 具有 on() 方 法 对 p 元 素 绑 定 的 事件 处 理 功 能 。 如 果 将 on() 方 法 换 成 bindO 〇 方法 , 则 
新 创建 的 p 元 素 在 单 击 段落 时 不 会 具有 滑动 隐藏 的 功能 。 
(2) 使 用 on() 方 法 时 要 注意 ,on() 方 法 前 面 的 元 素 必 须 在 页 面 加 载 时 就 存在 于 
DOM 中 ,动态 添加 的 元 素 可 以 放 在 on 的 第 2 个 参数 中 。 正 确 的 书写 代码 如 下 : 


$ ("body") -on("clickv"p"fancticn(0{ 
而 不 能 写 为 以 下 代码 。 


$ ("Pp") .on ("click", function () { 


114 移 除 事件 绑 定 


在 jQuery 中 ,为 元 素 移 除 绑 定 事件 可 以 使 用 unbind( ) 方 法 ,该 方法 的 语法 结构 
如 下 : 


unbind ([typel, [data]) 
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参数 说 明 如 下 。 

。 type( 可 选 ): 表示 事件 类 型 ,是 一 个 或 多 个 事件 类 型 构成 的 字符 串 。 

。 data( 可 选 ): 用 于 指定 要 从 每 个 匹配 元 素 的 事件 中 反 绑 定 的 事件 处 理 函 数 。 

例如 ,要 移 除 为 普通 按钮 绑 定 的 单 击 事件 ,可 以 使 用 下 面 的 代码 。 

$("input:button") .unbind ("click"); 

需要 注意 的 是 ,在 unbind() 方 法 中 ,两 个 参数 都 是 可 选 的 ,如 果 不 填 参数 ,将 会 删除 
匹配 元 素 上 所 有 绑 定 的 事件 。 

【 例 11-6】 使 用 unbind( ) 方 法 移 除 页 面 中 的 事件 绑 定 。 页 面 中 包含 3 个 段落 和 1 个 按 
钮 ,页面 加 载 后 , 单 击 任何 一 个 段落 ,都 将 使 该 段落 隐藏 ,但 是 当 单 击 按钮 后 ,再 单 击 任何 


一 个 段落 将 不 会 有 任何 变化 。 本 例文 件 11-6. html 在 浏览 器 中 的 显示 效果 如 图 11-6 
所 示 。 












































eS 
司 bxwebvchllll-6html PDP-ox| 0 vo Qo 司 DAweb\chllll-6htm| PD-oOx| Tv 
导 使 用 unbind0 方 法 移 除 页 面 .. x 态 使 用 unbind0 方 法 移 除 页 面 . x 
这 是 一 个 段落 。 这 是 一 个 段落 。 
这 是 另 一 个 段落 。 这 是 另 一 个 段落 。 
单 击 任何 段落 可 以 令 其 消失 。 包 括 本 段落 。 单 击 任何 段落 可 以 令 其 消失 。 了 包括 本 段落 。 
页 100% ~ 大 100% ~ 
图 11-6 例 11-6 的 页 面 显示 效果 
代码 如 下 : 
<html> 
<head> 


<title> 使 用 unbind0 方 法 移 除 页 面 中 的 事件 绑 定 < /title> 
< script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
< script type= "text/javascript"> 

$ (document) .ready (function (){ 


$ ("p") .click (function() { // 单 击 段落 
$ (this) -slideroggle (); // 该 段落 滑动 隐藏 
D; 
$ ("button") .click (function () { // 单 击 按钮 
$ ("p") -unbind (); // 移 除 所 有 段落 的 事件 绑 定 
D; 
D; 
< /script> 
< /head> 
<body> 


< 户 这 是 一 个 段落 。< /p> 
< 户 这 是 另 一 个 段落 。< /p> 
< 户 单 击 任何 段落 可 以 令 其 消失 。 包 括 本 段落 。< /p> 
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<buttom> 删 除 p 元 素 的 事件 处 理 器 < /button> 
< /body> 
</htm> 
【说 明 】 页 面 加 载 后 ,首先 为 段落 绑 定 了 click 事件 实现 滑动 隐藏 ,然后 又 为 button 
元 素 绑 定 了 click 事件 ,并 在 其 事件 处 理 中 使 用 unbind() 方 法 为 页 面 中 全 部 p 元 素 移 除 
事件 绑 定 。 因 此 , 当 单 击 按钮 后 ,再 单 击 任何 一 个 段落 将 不 会 有 任何 变化 。 


11.5 模拟 用 户 操作 


通过 之 前 的 介绍 可 以 看 到 ,jQuery 中 的 事件 往往 是 通过 用 户 对 页 面 中 的 元 素 进行 操 
作 而 产生 的 。 例 如 ,通过 单 击 按钮 ,才能 触发 按钮 元 素 的 click 事件 。 但 有 时 候 需要 通过 
模拟 用 户 的 操作 来 达到 相同 的 触发 事件 的 效果 。jQuery 提供 了 模拟 用 户 的 操作 触发 事 
件 、 模 拟 悬 停 事件 和 模拟 鼠标 连续 单 击 事件 3 种 模拟 用 户 操 作 的 方法 。 


11.5.1 模拟 用 户 的 操作 触发 事件 


在 jQuery 中 一 般 常用 trigger() 方 法 和 triggerHandler() 方 法 来 模拟 用 户 的 操作 和 触 
发 事件 。 语 法 格式 如 下 : 

trigger (event, [paraml,paran?, ...]) 

triggerHandler () (event, [paraml,paran, ...]) 
其 中 ,参数 event 是 必 选 的 ,用 来 指定 元 素 要 触发 的 事件 类 型 。 该 事件 既 可 以 是 自 定义 事 
件 (使 用 bind( 〇 函数 来 绑 定 ), 也 可 以 是 任何 标准 事件 。 参 数 Lparaml ,param2,.….] 是 可 选 
的 ,表示 传递 到 事件 处 理 程序 的 额外 参数 。 

例如 ,可 以 使 用 下 面 的 代码 来 触发 id 为 button 的 按钮 的 click 事件 。 


$ (# button") .trigger ("click"); 
trigger() 方 法 除了 可 以 触发 标准 事件 外 ,还 可 以 触发 自 定义 事件 。 例 如 ,以 下 代码 为 
元 素 绑 定 一 个 myClick 事件 ,代码 如 下 : 


$( 啡 button") .bind ("myClick", function (){ 
$ ("myview") .append("<p> 自 定义 事件 内 容 < /p> "); 
Ds; 


如 果 需 要 模拟 触发 该 事件 ,可 以 使 用 以 下 代码 。 





$ (button") .trigger ("myClick") ; 

triggerHandle( ) 方法 的 语法 格式 与 trigger() 方 法 完全 相同 。 所 不 同 的 是 : 
triggerHandler() 方 法 不 会 导致 与 浏览 器 同名 的 默认 行为 被 执行 ,并 且 只 影响 第 一 个 匹配 
元 素 ; 而 trigger() 方 法 会 导致 与 浏览 器 同名 的 默认 行为 的 执行 。 
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例如 ,使 用 trigger() 触 发 一 个 名 称 为 submit 的 事件 ,同样 会 导致 浏览 器 执行 提交 表 
单 的 操作 。 要 阻止 浏览 器 的 默认 行为 ,只 需 返 回 false。 另 外 ,使 用 trigger() 方 法 和 
triggerHandler() 方 法 还 可 以 触发 bind() 绑 定 的 自 定义 事件 ,并 且 还 可 以 为 事件 传递 
参数 。 

【 例 11-7】 模拟 用 户 的 操作 和 触发 事件 示例 。 本 例文 件 11-7. html 在 浏览 器 中 的 显示 
效果 如 图 11-7 所 示 。 


DAweb\ch1ll\11-7html 只 ~ OX 互 ] DAwebvchll\l1-7html PDP- OX 
感 模拟 用 户 的 损 作 能 发 事件 示 .. x | | 总 模 才 用 户 的 提 作 增发 事件 示 . x 









































宇宙 电子 文本 被 选中 ! 
激活 input 元 素 的 select 事 件 激活 input 元 素 的 select 事 件 











图 11-7 例 11-7 的 页 面 显示 效果 


代码 如 下 : 


<html> 
<head> 
<title> 模 拟 用 户 的 操作 触发 事件 示例 < /title> 
< script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
< script type= "text/javascript"> 
$ (document) .ready (function() { 
$ ("input") .select (function(){ ”//input 元 素 的 select 事 件 
$ ("input") .after(' 文 本 被 选中 !1yy 在 inpt 元 素 后 面 显 示 “ 文 本 被 选中 !1” 提 示 
Ds; 
$ ("button") .click(function(){ ”// 单 击 按钮 事件 
$ ("input") .trigger ("select"); // 模 拟 input 元 素 的 select 事件 
D; 
Ds; 
< /script> 
< [head> 
<body> 
< input type= "text" name= "conName" value= " 守 宙 电子 " 入 
<br /> 
<button> 激 活 input 元 素 的 select 事件 < /button> 
< /body> 
< /htm> 


【说 明 】 页 面 加 载 后 ,选中 文本 框 中 的 内 容 时 会 触发 input 元 素 的 select 事件 ,在 文 
本 框 的 后 面 显示 “文本 被 选中 !” 的 提示 ; 单 击 按钮 会 触发 按钮 的 click 事件 ,通过 使 用 
trigger() 方 法 为 input 元素 模拟 select 事件 ,同样 能 够 在 文本 框 的 后 面 显 示 “ 文 本 被 选 
中 1” 的 提示 。 
trigger() 方 法 触发 事件 后 ,会 执行 事件 在 浏览 器 中 的 默认 操作 。 代 码 如 下 : 
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$ ("input") .trigger ("focus"); // 模 拟 input 元 素 的 focus 事 件 


上 述 代 码 不 仅 会 触发 input 元 素 的 focus 事件 ,也 会 使 input 元 素 本 身 得 到 焦点 ( 浏 
览 器 默认 操作 ) 。 如 果 只 是 想 触 发 绑 定 的 事件 ,而 不 想 执行 浏览 器 的 默认 操作 ,可 以 使 用 
triggerHandle() 方 法 来 实现 。 代 码 如 下 : 


$ ("input") .triggerHandle ("focas")7 // 模 拟 input 元 素 的 focus 事 件 


【 例 11-8】 模拟 触发 事件 而 不 执行 默认 操作 示例 。 本 例文 件 11-8. html 在 浏览 器 中 
的 显示 效果 如 图 11-8 所 示 。 




















模拟 触发 事件 而 不 执行 默认 … X 态 模拟 舱 发 事件 而 不 执行 默认 … x 
宇宙 电子 发 生 Input select 事 件 ! 


GE 时 Dswebvhll\ll-shtm| DPD- Ox GE 司 DAwebvchll\ll-shtml PD- OX 
名 乱 


























图 11-8 例 11-8 的 页 面 显 示 效 果 


代码 如 下 : 


<html> 
<head> 
<title> 模 拟 触发 事件 而 不 执行 默认 操作 示例 < /title> 
< script src="js/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
< script type= "text/javascript"> 
$ (document) .ready (function() { 


$ ("input") .select (function() { //input 元 素 的 select 事 件 

$ ("imput") .after( 发 生 Irput select 事件 1"); // 在 input 元 素 后 面 显示 提示 
D; 
$ ("button") .click (function() { // 单 击 按钮 事件 


$ ("input") .triggerHandler ("select"); // 模 拟 input 元 素 的 select 事件 
D; 
Ds; 
< /script> 
< /head> 
<body> 
< input type= "text" name= "conName" value= " 守 宙 电子 " /> 
<br /> 
<button> 激 活 input 元素 的 select 事 件 < /button> 
< /pody> 
< /html> 


【说 明 】 使 用 triggerHandler() 方 法 模拟 了 input 元 素 的 select 事件 ,但 是 不 会 引起 
所 发 生 事件 的 默认 行为 (默认 的 是 文本 被 选中 ) 。 单 击 按钮 后 ,只 能 看 到 文本 框 后 面 的 “发 
生 Input select 事件 1” 的 提示 ,而 文本 框 本 身 的 内 容 没 有 被 选中 。 
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11.5.2 模拟 悬 停 事件 


模拟 悬 停 事 件 是 指 模拟 鼠标 移动 到 一 个 对 象 上 又 从 该 对 象 上 移出 的 事件 ,可 以 通过 
jQuery 提供 的 hover(over,out) 方 法 实现 。hover() 方 法 的 语法 结构 如 下 : 

hover (over, out) 

参数 说 明 如 下 。 

。 over: 用 于 指定 当 鼠 标 光标 在 移动 到 匹配 元 素 上 时 触发 的 函数 。 

。 onut: 用 于 指定 当 鼠 标 光 标 在 移出 匹配 元 素 上 时 和 触发 的 函数 。 

当 鼠 标 光标 移动 到 一 个 匹配 的 元 素 上 时 ,会 触发 指定 的 第 一 个 函数 。 当 鼠标 光标 移 
出 这 个 元 素 时 ,会 触发 指定 的 第 二 个 函数 。 伴 随 着 对 鼠标 光标 是 否 仍然 处 在 特定 元 素 中 


的 检测 (例如 ,处 在 div 中 的 图 像 ), 如果 是 , 则 会 继续 保持 “ 悬 停 ” 状 态 , 而 不 触发 移出 
事 作 。 


【 例 11-9】 模拟 鼠标 光标 悬 停 事件 示 例 。 本 例文 件 11-9. html 在 浏览 器 中 的 显示 效 


果 如 图 11-9 所 示 。 
9 S) 旧 ] Dswebvchll\ll-9 PO 
个 模仿 县 停 事 件 x 
































司 DAwebvhllvll-9 DP- OX 
情 模仿 县 停 事件 x 


请 把 鼠标 指针 移动 到 这 个 段落 上 。 

















请 把 鼠标 指针 移动 到 这 个 段落 上 。 





抽 100% ~ 用 1006 7 


图 11-9 例 11-9 的 页 面 显 示 效 果 
代码 如 下 : 


<html> 
<head> 
<title> 模 拟 悬 停 事件 < /title> 
< script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
< script type= "text/javascript"> 
$ (Gocument) .ready (functicn (){ 


$("p") -hover (function (){ // 鼠 标 光 标 悬 停 
$ ("p") .css ("background- color "yellow"); // 段 落 背 景色 变 为 黄色 
hfunction() { // 鼠 标 光标 移 开 
$ ("Pp") .css ("background- color"™,"# dio"); /人 段落 背景 色 恢复 为 浅 灰色 
D; 
D; 
< /script> 
< [headq> 
<body> 
<p style= "background color: #dod"> 请 把 鼠标 指针 移动 到 这 个 段落 上 。< /p> 
< /body> 
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11.5.3 模拟 鼠标 连续 单 击 事件 


模拟 鼠标 连续 单 击 事件 实际 上 是 为 每 次 单 击 鼠标 时 设置 一 个 不 同 的 函数 ,可 以 通过 
jQuery 提供 的 toggle() 方 法 实现 。toggle() 方 法 用 于 绑 定 两 个 或 多 个 事件 处 理 器 函数 ， 
以 响应 被 选 元 素 的 轮流 的 单 击 事件 , 当 指 定 元 素 被 单 击 时 ,在 两 个 或 多 个 函数 之 间 轮 流 切 
换 。 语 法 格式 如 下 : 


toggle (functicnl () ,function2(), [functionN()], ..) 


其 中 ,参数 function1() 和 function2() 都 是 必 选 项 。 分 别 表示 当 元 素 在 每 偶数 次 或 奇数 次 
被 单 击 时 要 运行 的 函数 。 参 数 functionN() 为 可 选项 ,表示 需要 切换 的 其 他 函数 。 
toggle() 方 法 还 可 以 用 于 切换 元 素 的 可 见 状态 。 如 果 被 选 元 素 可 见 , 则 隐藏 这 些 元 
素 ; 如 果 被 选 元 素 隐 藏 , 则 显示 这 些 元 素 。 
【 例 11-10】 模拟 鼠标 连续 单 击 事件 示例 。 本 例文 件 11-10. html 在 浏览 器 中 的 显示 
效果 如 图 11-10 所 示 。 





Fel 
x 


PB) a oweb\chliul1 Pp ~ 














[< 同 右 Daweb\chli1-1 P= Ox J PD owebhu1 Do- ox 


号 模拟 气 标 连续 单 二 事件 


| 单 击 按 甸 切 扳 不 同 的 吝 蘑 娟 色 | 上 L 单 击 按 甸 切 扳 不 同 的 将 娄 及 忆 | 





图 11-10 例 11-10 的 页 面 显示 效果 


代码 如 下 : 


<html> 
<head> 

<title> 模 拟 鼠 标 连续 单 击 事件 < /title> 

< script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> 
< /script> 

< script type= "text/javascript" src= "js/jquery- migrate- 1.2.1.js’> 
< /script> 

< script type= "text/javascript"> 
$ (Gocument) .ready (function() { 


$ ("button") .toggle (function() { // 鼠 标 第 1 次 单 击 
$ ("Pody") .css (background color"v "red"); // 红 色 背 景 

jfanction 0){ // 鼠 标 第 2 次 单 击 
$ ("body") .css ("background- colorm "green"); // 绿 色 背 景 

jfunction 0{ // 鼠 标 第 3 次 单 击 
$ ("body") .css ("background- colorm "bluem); // 黄 色 背 景 
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< /script> 
< /head> 
<body> 
<button> 单 击 按钮 切换 不 同 的 背景 颜色 < /button> 
< /body> 
< /htm> 
【说 明 】 
(1) 由 于 toggle() 方 法 在 jQuery 1. 9 十 版 本 中 被 移 除 ,需要 使 用 jQuery Migrate( 迁 
移 ) 插 件 恢复 该 功能 ,此 处 使 用 了 Migrate 1. 2. 1 版 本 。 代 码 如 下 : 


< script type= "text/javascript" sro= "js/jqvery- migrate 1.2.1.js">< /script> 


(2) 在 按钮 的 鼠标 连续 单 击 事件 中 ,使 用 toggle() 方 法 定义 了 3 个 函数 ,分 别 设置 了 
页 面 不 同 的 背景 色 , 每 次 单 击 按钮 ,页 面 的 背景 色 都 会 发 生 改变 。 


116 事件 对 象 


由 于 标准 DOM 和 IE-DOM 所 提供 的 事件 对 象 的 方法 有 所 不 同 , 导 致使 用 JavaScript 
在 不 同 的 浏览 器 中 获取 事件 对 象 比较 烦琐 。jQuery 针对 该 问题 进行 了 必要 的 封装 与 扩 
展 , 以 便 解 决 浏览 器 兼容 性 问题 ,从 而 在 任意 浏览 器 中 都 可 以 轻松 获取 事件 处 理 对 象 。 


11.6.1 事件 对 象 的 属性 


在 jQuery 中 对 事件 属性 进行 了 封装 ,使 事件 处 理 在 各 个 浏览 器 下 都 可 以 正常 运行 而 
不 需要 对 浏览 器 类 型 进行 判断 。 事 件 对 象 的 常用 属性 见 表 11-2。 
表 11-2 事件 对 象 的 常用 属性 
属性 描 ” 述 属性 描 述 
pageX | 鼠标 指针 相对 于 文档 的 左边 缘 的 位 置 ”| which | 返回 在 鼠标 或 键盘 事件 中 被 按 下 的 键 








pageY | 鼠标 指针 相对 于 文档 的 上 边缘 的 位 置 “|‖ target | 返回 触发 事件 的 元 素 





type 返回 事件 的 类 型 data 用 于 传递 事件 之 外 的 额外 数据 

















1. pageX 和 pageY 属性 [人 Down po 


n 居 检查 鼠标 光标 的 当前 位 置 > 
和 Page™ 属性 用 于 获取 光标 相对 于 页 面 鼠标 光标 的 当前 位 轩 
的 X 坐 标 和 Y 坐标 。 若 页 面 上 有 滚动 条 , 则 要 加 上 
滚动 条 的 宽度 或 高 度 。 
【 例 11-11】 使 用 事件 对 象 的 pageX 和 pageY 
属性 获取 鼠标 光标 的 当前 位 置 , 本 例文 件 11-11 
. html 在 浏览 器 中 的 显示 效果 如 图 11-11 所 示 。 图 11-11 例 11-11 的 页 面 显示 效果 


























于 标 : 105，Y 于 标 : 88 
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代码 如 下 : 


<htm> 
<head> 
<title> 用 pageX 和 pageY 属 性 获取 鼠标 光标 的 当前 位 置 < /title> 
< script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
< head> 
< body> 
<h3> 鼠标 当前 位 置 < /h3> 
<div id "pos" style= "border: lpx solid blue"> < /div> 
< script type= "text/javascript"> 
$ (document) .mousemove (function (e){ // 鼠 标 移动 事件 
$( 啡 pos") .text (以 坐 标 : "+e.pageX+ ", Y 坐 标 : "+e.pageY); 
// 显 示 获 取 的 当前 鼠标 坐标 
D; 
< /script> 
< /pody> 
</htm> 


2. type 属性 
type 属性 用 于 获取 事件 的 类 型 ,代码 如 下 : 


$ ("a") .click(function (event){ 
alert (event.type)7 // 获 取 事 件 类 型 
]) 


该 段 代 码 运行 后 会 输出 click 。 
3. which 属性 
which 属性 用 于 获取 鼠标 或 键盘 事件 中 被 按 下 的 键 。 用 于 获取 鼠标 按键 的 代码 如 下 : 


$ ("a") .mousedown (function (event) { 
alert (event .which) ; //1 为 鼠标 左 键 ;2 为 鼠标 中 间 键 ;3 为 鼠标 右键 
]) 


用 于 获取 键盘 按键 的 代码 如 下 : 


$ ("input") .keyup (function (event){ 
alert (event .which) ; // 获 取 键 盘 按 键 ,结果 为 所 按 字 符 对 应 的 AscII 码 数值 





D) 


【 例 11-12】 事件 对 象 的 type 属性 和 which 属 
性 的 示例 ,本 例文 件 11-12. html 在 浏览 器 中 的 显示 











效果 如 图 11-12 所 示 。 kevdown; 65 
代码 如 下 : 
> ey 图 11-12 例 11-12 的 页 面 显 示 效 果 


<title> 事 件 对 象 的 type 属 性 和 which 属 性 < /title> 
< script src= "js/jquery- 3.2.1.min.js" typer "text/javascript"> < /script> 
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< /head> 
<body> 

< input icF "whichkey" value= "> 

<div idmog></div 

< script type= "text/javascript"> 

$ (#whichkey') .keydown (function (e) { // 键 盘 按 下 的 keysom 事 件 
$ (#10g"') .html e.typer ': '+e.which); 
// 显 示 触 发 事件 的 类 型 和 所 按 字符 对 应 的 RscTI 码 数值 


4. target 属性 


target 属性 用 于 获取 触发 事件 的 元 素 。jQuery 对 其 进行 封装 之 后 ,避免 了 各 个 浏览 
器 不 同 标准 之 间 的 差异 。 


11.6.2 事件 对 象 的 方法 


jQuery 事件 对 象 的 常用 方法 , 见 表 11-3。 
表 11-3 事件 对 象 的 常用 方法 








pe 法 描 述 
stopPropagation() 阻止 事件 的 冒 泡 
preventDefault( ) 阻止 元 素 发 生 默 认 的 行为 (例如 , 当 单 击 * 提 交 ” 按 钮 时 阻止 对 表单 的 提交 ) 





isDefaultPrevented() 根据 事件 对 象 中 是 否 调 用 过 preventDefault() 方 法 来 返回 一 个 布尔 值 
isPropagationStopped() | 根据 事件 对 象 中 是 否 调用 过 stopPropagation( ) 方 法 来 返回 一 个 布尔 值 








在 事件 对 象 的 方法 中 ,最 为 重要 的 两 个 方法 是 stopPropagation () 方 法 和 
preventDefault() 方 法 。stopPropagation() 方 法 用 于 阻止 事件 冒 泡 ,preventDefault() 方 
法 用 于 阻止 元 素 发 生 默认 的 行为 。 下 面 详细 讲解 它们 的 用 法 。 


1. 阻止 事件 冒 泡 


在 讲解 stopPropagation() 方 法 之 前 ,首先 了 解 一 下 二 
什么 是 事件 冒 泡 。 a 
1) 什么 是 事件 冒 泡 一 
下 面 通过 一 个 例子 来 讲解 什么 是 事件 冒 泡 。 外 局 各 | 的 加 天 
【 例 11-13】 事件 冒 泡 的 模型 展示 。 页 面 中 包含 
3 个 元 素 : body 元 素 、div 元 素 以 及 div 元 素 内 的 span | 内 层 spen 元 素 被 单 击 
元 素 。 单 击 最 内 层 的 span 元 素 时 ,触发 span 元 素 的 | 外 屋 上 " 元 素 补 单 击 
click 事件 ,但 同时 会 触发 div 元 素 和 body 元 素 的 click | 元素 被单 击 
事件 。 页面 输出 3 条 记录 ,显示 出 3 种 元 素 都 被 单 击 的 


提示 。 本 例文 件 11-13. html 在 浏览 器 中 的 显示 效果 如 
11-13 所 示 。 图 11-13 事件 冒 泡 模型 
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代码 如 下 : 





<htm> 
<head> 
<title> 事 件 冒 泡 模型 < /title> 
< script src= "js/jquery— 3.2.1.min.js" type= "text/javascript"> < /script> 
< script type= "text/javascript"> 
$ (document) .ready (function () { 
// 为 span 元素 绑 定 click 事 件 
$ ('span') -bind('click'， function () { 
Var txt=$ ('#msg') -html(0+ '<p> 内 层 span 元 素 被 单 击 < /p> '; 
$ ("#1msg') -html (txt)7 


Ds; 

/为 div 元 素 绑 定 click 事 件 

$( 虽 content') .bind('click'， function () { 
var txt=$ ('#msg') .html()+ '<p> 外 层 div 元 素 被 单 击 < /p> '; 
$ ("#1msg') .html (txt)7 


Ds; 
// 为 body 元 素 绑 定 click 事 件 
$ ("body') .bind('click’, function () { 
var txt=$ ('#msg') .html()+ '<p>body 元 素 被 单 击 < /p> '; 
$ ('#msg') .html (txt); 
Ds; 
Ds; 
< /script> 
< /head> 
<body> 
<div id= "oontent" style= "height: 40pxzpacdtiing: 20pxzborder: Fx solid blue"> 
外 层 div 元 素 
< span style= "margin: 10px;padding: Spx;border: lpx solid blue"> 内 层 span 
元 素 < /span> 
</div> 
<div id "msg"> < /div> 
< /body> 
</htm> 


用 户 原 本 是 希望 单 击 span 元 素 时 只 执行 该 元 素 的 事件 ,但 同时 也 触发 了 div 元 素 和 
body 元 素 的 click 事件 ,这 就 是 事件 冒 泡 引起 的 。 


事件 捕获 和 事件 冒 泡 都 是 一 种 事件 模型 ,DOM 标准 规定 应 该 同时 使 用 这 两 个 模型 ; 
首先 事件 要 从 DOM 树 项 层 的 元 素 到 DOM 树 底 层 的 元 素 进 行 捕获 ,然后 在 通过 事件 冒 


泡 返 回 到 DOM 树 的 顶层 。 

所 谓 的 事件 冒 泡 就 是 ,如 果 在 某 一 个 对 象 上 触发 某 一 类 事件 (如 例 11-13 的 span 元 
素 的 click 事件) ,那么 此 事件 会 向 对 象 的 父 级 对 象 传播 ,并 触发 父 对 象 上 定义 的 同类 事 
件 。 事 件 传 播 的 方向 是 从 最 底层 到 最 顶层 ,类 似 于 水 泡 从 水 底 浮 上 来 一 般 。 

2) 使 用 stopPropagation() 方 法 阻止 事件 冒 泡 

事件 冒 泡 可 能 会 引起 预料 之 外 的 结果 ,因此 ,有 必要 对 事件 的 作用 范围 进行 限制 。 要 
解决 这 个 问题 ,就 必须 访问 事件 对 象 。 事件 对 象 提供 了 一 个 stopPropagation() 方 法 ,使 
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用 该 方法 可 以 阻止 事件 冒 泡 。 
若 要 阻止 例 11-13 程序 的 事件 冒 泡 ,需要 添加 以 下 代码 。 
(1) 在 程序 中 需要 使 用 事件 对 象 ,只 需要 为 函数 添加 一 个 参数 event。 代 码 如 下 : 
$ ('element') .bind('click',function(event){  //event 为 事件 对 象 
/事件 处 理 程序 
Ds; 


(2) 可 以 在 每 个 事件 处 理 程序 中 加 入 一 名 代码 。 





event .stopPropagation (); // 阻 止 事件 冒 泡 
例如 ,阻止 span 元 素 的 事件 冒 泡 的 代码 如 下 : 


$ ('span') .bind('click'，function (event){ //event 为 事件 对 象 
var txt=$ ( 虽 msg') -html 0+ '<E> 内 层 span 元 素 被 单 击 < /p> '; 
$ ("#1msg') -html (txt)7 
event .stoppropagation(); // 阻 止 事件 冒 泡 





由 于 stopPropagation() 方 法 是 跨 浏 览 器 的 ,所 以 
名 BD 不 必 担 心 它 的 兼容 性 。 添加 了 阻止 事件 骨 泡 的 代码 
局 事件 冒 


















































泡 模型 x 后 , 单 击 span 元 素 , 可 以 看 到 只 有 “内 层 span 元 素 被 
外 层 div 元 素 [内 大 cp 元素 单 击 ” 的 输出 结果 ,如 图 11-14 所 示 ,说明 只 有 span 元 
素 相应 了 click 事件 ,程序 成 功 阻止 了 事件 骨 泡 。 
内 层 span 元 素 被 单 击 2. 阻止 元 素 的 默认 行为 








网 页 中 的 元 素 有 自己 的 默认 行为 ,例如 ,在 表单 验 
图 11-14 阻止 事件 冒 泡 证 时 ,表单 的 某 些 内 容 没 有 通过 验证 ,但 是 在 单 击 “ 提 
交 ” 按 钮 后 表单 还 是 会 提交 。 这 时 就 需要 阻止 浏览 器 的 
默认 行为 。 在 jQuery 中 ,应 用 preventDefault() 方 法 可 以 阻止 元 素 的 默认 行为 。 
在 事件 处 理 程序 中 加 入 如 下 代码 就 可 以 阻止 默认 行为 : 
event. preventDefault (); // 阻 止 元 素 的 默认 行为 


如 果 想 同时 停止 事件 冒 泡 和 元 素 的 默认 行为 ,可 以 在 事件 处 理 程序 中 返回 false。 即 
retum false; // 人 阻止 事件 冒 泡 和 元 素 的 默认 行为 





这 是 同时 调用 stopPropagation() 和 preventDefault() jl 
方法 的 一 种 简要 写法 。 国 DswebxhllNl1PY 0 

【 例 11-14】 使 用 事件 对 象 的 preventDefault() 方 法 | ee 
阻止 超 链接 单 击 事件 的 默认 行为 ,本 例文 件 11-14. html 在 
浏览 器 中 的 显示 效果 如 图 11-15 所 示 。 

代码 如 下 : 


<html> 

















httpy/wwwsohucom/ 下 100% ~ 





图 11-15 阻止 默认 事件 动作 
295 


Web 前 端 开发 实例 教程 一 HIM 5+ JavaScript + jQuery 





<head> 
<title> preventDefamt() 方 法 阻止 默认 事件 动作 < /title> 
< script src= "js/jquery- 3.2.1.min.js" typer "text/javascript"> < /script> 
< script type= "text/javascript"> 
$ (Gocument) .ready (function() { 
$ ("a") .click(function (event) { // 单 击 超 链接 
event .preventDefault (); // 阻 止 元 素 的 默认 行为 


</script> 
< /head> 
<body> 
<a hre 全 "http: //www.schu.cay 必 搜狐 网 < /a> 
</bodqy> 
< /html> 


【说 明 】 在 a 元 素 的 click 事件 处 理 函 数 中 调用 preventDefault() 方 法 ,阻止 超 链接 
单 击 事件 的 默认 行为 。 因 此 , 单 击 网 页 中 的 超 链接 ,将 不 会 打开 目标 页 面 。 





117 jQuery 事件 方法 


jQuery 提供 了 一 组 事件 方法 ,用 于 处 理 各 种 HTML 事件 ,本 节 讲 解 常用 事件 方法 的 
用 法 。 


11.7.1 键盘 事件 


jQuery 提供 的 与 键盘 事件 相关 的 方法 见 表 11-4。 
表 11-4 与 键盘 事件 相关 的 方法 


方 ”法 描 述 
绑 定 到 focusin 事件 处 理 函 数 的 方法 , 当 光 标 进 入 HTML 元 素 时 























ocusin(handler(eventObject)) 触发 focusin 事件 
oat tObject)) 绑 定 到 focusout 事件 处 理 函 数 的 方法 , 当 光 标 离开 HTML 元 素 
ri 时 触发 focusout 事件 
0 绑 定 到 keydown 事件 处 理 函 数 的 方法 , 当 按 下 按键 时 触发 

keydown 事件 

绑 定 到 keypress 事件 处 理 函 数 的 方法 , 当 按 下 并 放 开 按键 时 触发 

eypress(handler(eventObject)) 

keypress 事件 

or ; FE 和 

eyup( handler(eventObject)) i A 


需要 注意 的 是 ,完整 的 keypress 过 程 分 为 两 个 部 分 : 按键 被 按 下 的 keydown 
按键 被 松 开 的 keyup 事件 。 
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【 例 11-15】 使 用 keypress() 方 法 的 示例 ,本 例文 件 11-15. html 在 浏览 器 中 的 显示 
效果 如 图 11-16 所 示 。 















































站 DAweb\chil\l1-1 P - CX 着 DAweb\chll\11-1 P ~ OX 
入 使 用 keypress0 方 法 的 示例 x 苔 使 用 keypress0 方法 的 示例 x 


输入 您 的 名 字 : 
Keypress 事 件 发 生 了 :0 次 


输入 您 的 名 字 : -car 
Keypress 事 件 发 生 了 :3 次 








图 11-16 例 11-15 的 页 面 显示 效果 


代码 如 下 : 


<html> 
<head> 
<title> 使 用 keypress() 方 法 的 示例 < /title> 
< script src= 门 s/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
< script type= "text/javascript"> 


i=0; 
$ (document) .ready (function() { 
$ ("input") .keypress (function (){ // 每 按 一 次 按键 
$ ("span") .text (i+=1); // 按 键 次 数 +1 
Ds; 
Ds 
< /script> 
< /head> 
<body> 


输入 您 的 名 字 : < input type= "text" /> 
<p> Keypress 事 件 发 生 了 :< span> 0< /span> 次 < /p> 
< /pody> 
< /htm> 


【说 明 】 在 文本 框 中 每 插入 一 个 字符 ,就 会 发 生 一 次 keypress 事件 。 

【 例 11-16】 使 用 keydown() 方 法 和 keyup() 方 法 的 示例 。 当 发 生 按 键 按 下 的 
keydown 事件 时 ,文本 框 变 为 黄色 背景 ; 当 发 生 按键 被 松 开 的 keyup 事件 时 ,文本 框 变 为 
红色 背景 。 本 例文 件 11-16. html 在 浏览 器 中 的 显示 效果 如 图 11-17 所 示 。 

代码 如 下 : 


<htm> 
<head> 
<title> 使 用 Jeydom() 方 法 和 keyup0) 方 法 示例 < /title> 
< script src= "js/jquery-— 3.2.1.min.js" type= "text/javascript"> < /script> 
< script type= "text/javascript"> 
$ (Gocument) .ready (function() { 
$ ("input") -Jeydown (function () { 
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司 DAweb\ch11\11-16.html Dr-ox|r os 
全 多 keydown0 方 法 和 key.。X 


输入 您 的 名 字 : ER 


妆 发 生 按键 按 下 的 key ao 事件 时 ， 文本 框 会 改变 颜色 ， 
入 代 拒 松 开 的 keyup 事 件 时 1 
容 。 


) DAweb\chl1\11-16.html prox|n oD 
全 使 用 keydown0 方 法 和 key-，X 


输入 您 的 名 字 : 民 = 


当 发 生 按键 按 下 的 keydown 事 件 时 ， 文 本 框 会 改变 颜色 
发 生 按 负 被 从 开 的 keyup 事 件 时 ， 文 本 框 会 ee 
请 输入 内 容 。 























R100% > 区 100% ~ 














图 11-17 例 11-16 的 页 面 显示 效果 


$ ("input") .css ("background- color "yellow"); 
// 按 键 按 下 的 Jeydom 事 件 , 文 本 框 变 为 黄色 背景 
Ds 
$ ("input") .keyup (function () { 
$ ("input") .css ("background- color "red") ; 
// 按 键 松 开 的 keyup 事 件 ,文本 框 变 为 红色 背景 
Ds; 
Ds 
< /script> 
< /head> 
<body> 
输入 您 的 名 字 : < input type= "text" /> 
<P> 当 发 生 按 键 按 下 的 keydowm 事 件 时 ,文本 框 会 改变 颜色 ; 当 发 生 按 键 被 松 开 的 keym 事 
件 时 ,文本 框 会 再 次 改变 颜色 。 请 输入 内 容 。< /E> 
< /body> 
< /htm> 


11.7.2 鼠标 事件 


jQuery 提供 的 与 鼠标 事件 相关 的 方法 见 表 11-5。 
表 11-5 与 鼠标 事件 相关 的 方法 














方 法 描 述 
click(handler(eventObject)) 绑 定 到 click 事件 处 理 函数 的 方法 , 当 单 击 鼠 标 时 触发 click 
事件 
dblelick (handler(eventObject) ) oe ee 人 
focusin(handlerCeventObject) ) eh Se 处 理 函数 的 方法 , 当 光 标 进入 HTML 元 素 
focusout(handler(eventObject)) 做 定 到 focusout 事件 处 理 函 数 的 方法 , 当 光 标 离开 HTML 元 
素 时 触发 focusout 事件 
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方 法 描 


述 





mousedown(handler(eventObject)) 


发 mousedown 事件 


绑 定 到 mousedown 事件 处 理 函数 的 方法 , 当 按 下 鼠标 按键 时 触 





mouseenter(handler(eventObject)) | 绑 定 到 鼠标 进入 元 素 的 事件 处 理 函 数 





mouseleave(handler(eventObject)) | 绑 定 到 鼠标 离开 元 素 的 事件 处 理 函 数 





mousemove(handler(eventObject)) lgdnowe 体 


绑 定 到 mousemove 事件 处 理 函 数 的 方法 , 当 移动 鼠标 时 触发 





mouseout(handler(eventObject)) 


素 时 触发 mouseout 事件 


绑 定 到 mouseout 事件 处 理 函数 的 方法 , 当 鼠 标 指针 离开 被 选 元 





mouseover(handler(eventObject)) 


上 方 时 触发 mouseover 事件 


绑 定 到 mouseover 事件 处 理 函 数 的 方法 , 当 鼠 标 指针 位 于 元 素 





toggle(handler(eventObject)) 





执行 时 处 理 函 数 


绑 定 2 个 或 更 多 处 理 函 数 到 指定 元 素 , 当 单 击 指定 元 素 时 ,交替 


需要 注意 的 是 ,不 论 鼠 标 指针 离开 被 选 元 素 还 是 任何 子 元 素 ,都 会 触发 mouseout 事 
件 ;而 只 有 在 鼠标 指针 离开 被 选 元 素 时 , 才 会 触发 mouseleave 事件 。 
【 例 11-17】 区 别 mouseleave() 方 法 与 mouseout() 方 法 不 同 的 示例 。 本 例文 件 


11-17. html 在 浏览 器 中 的 显示 效果 如 图 11-18 所 示 。 

















S|) DAweb\ch11\11-17.html 
感 mouseleave 与 mouseou.. x 











不 论 鼠 标 指针 离开 被 选 元 素 还 是 任何 子 元 素 ， 都 会 触发 aouseout 事 件 。 
只 有 在 鼠标 指针 离开 被 选 元 素 时 ， 才 会 触发 mouseleave 事 件 。 





被 触发 的 Mouseout 事 件 : 18 被 触发 的 Mouseleave 事 件 : 5 


也 100%6 





图 11-18 例 11-17 的 页 面 显示 效果 


代码 如 下 : 


<html> 
<head> 
<title> mouseleave 与 mouseout 的 不 同 < /title> 


< script src= "js/jqvuery- 3.2.1.min.js" type= "text/javascript"> < /script> 


< script type= "text/javascript"> 
0; 
0; 

$ (Gocument) .reaqy (functicn (){ 
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$ ("div.out") -mousecut (function () { // 触 发 mouseout 事件 
$("-out span") .text (xt=1); // 每 次 触发 mouseout 事件 ,累计 次 数 +1 
Ds; 
$ ("div.leave") .mouseleave (function() { // 触 发 mouseleave 事 件 
$ (".leave span") .text (y+ =1); // 每 次 触发 mouseleave 事 件 , 累 计 次 数 +1 
Ds; 
Ds; 
</script> 
< /head> 


<body> 
< 户 不 论 鼠 标 指 针 离开 被 选 元 素 还 是 任何 子 元 素 ,都 会 触发 mpuseout 事件 。< /p> 
< 户 只 有 在 鼠标 指针 离开 被 选 元 素 时 , 才 会 触发 mouseleave 事 件 。< /p> 
<div class= "out" style= "background- color: lightgray;padding: 20px; 
width: 40%;float: left"> 
<h2 style= "packground- oolor: white; 吃 被 触发 的 Mbuseot 事 件 : < gpar>< /spar> 
</h> 
</div> 
<div class= "leave" style= "background- color: lightgray;padding: 20px; 
width: 40%;float: right"> 
<h2 style= "background- color: white; 吃 被 触发 的 Mouseleave 事 件 : < span> 
</span>< /h2> 
</div> 
< /body> 
< /htm> 


11.7.3 浏览 器 事件 


jQuery 提供 的 与 浏览 器 事件 相关 的 方法 见 表 11-6。 
表 11-6 与 浏览 器 事件 相关 的 方法 








方 法 描 述 
Pe Pe 绑 定 到 error 事件 处 理 函 数 的 方法 , 当 元 素 遇 到 错误 (例如 没有 正确 
. 载 人 ) 时 触发 error 事件 
a 绑 定 到 resize 事件 处 理 函 数 的 方法 , 当 调 整 浏览 器 窗口 的 大 小 时 触 
resize(handler(eventObject)) . 
发 reslze 事件 





绑 定 到 scroll 事件 处 理 函数 的 方法 , 当 ScrollBar 控件 上 的 或 包含 一 
scroll(handler(eventObject)) | 个 滚动 条 的 对 象 的 滚动 框 被 重新 定位 或 按 水 平 (或 垂直 ) 方 向 滚动 
时 触发 scroll 事件 





【 例 11-18】 使 用 scroll() 方 法 示例 ,本 例文 件 11-18. html 在 浏览 器 中 的 显示 效果 如 
图 11-19 所 示 。 
代码 如 下 : 


<html> 
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局 DAwebvchll\ll-1 DP- OX 
并 使 用 scroll0 方 法 示例 x 


请 试 着 滚动 DIV 中 的 文本 : 


DIV 中 的 文本 DIV 中 的 文 “ 
本 DIV 中 的 文本 DIV 中 的 _ 
文本 DIV 中 的 文本 DIV 中 国 
的 文本 避 











滚动 了 8 次 。 





中 100% 了 





图 11-19 例 11-18 的 页 面 显 示 效 果 


<head> 
<title> 使 用 scroll () 方 法 示例 < /title> 
< script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
< Script type= "text/javascript"> 


0; 
$ (document) .ready (function() { 
$ ("div") .scroll (function() { //div 元 素 的 滚动 事件 
$ ("span") .text (x+ =1); // 每 次 拉动 滚动 条 触发 滚动 事件 ,累计 滚动 
/次 数 +1 
D; 
D; 
< /script> 
< /head> 
<body> 


<p> 请 试 着 滚动 DV 中 的 文本 :< /p> 

<div style= "width: 200px;height: 100pxzoverflow: scroll;"> 
DIV 中 的 文本 DV 中 的 文本 DV 中 的 文本 DIV 中 的 文本 DIV 中 的 文本 Drv 中 的 文本 
<br /><br /> 
DIV 中 的 文本 DIV 中 的 文本 DV 中 的 文本 DIV 中 的 文本 DrV 中 的 文本 DIV 中 的 文本 

</div> 

<p> 滚 动 了 < span> 0< /span> 次 。< /p> 

< /body> 
< /htm> 


【说 明 】 scroll 事件 适用 于 所 有 可 滚动 的 元 素 和 window 对 象 (浏览 器 窗口 ) 。 
习 是 


. 简 述 $ (document). ready() 方 法 和 window. onload() 方 法 的 区 别 。 
. 如 何 为 元 素 绑 定 事 件 和 解除 绑 定 的 事件 ? 

. 什么 是 事件 冒 泡 ?怎样 阻止 事件 冒 泡 ? 

. 简 述 同时 停止 事件 冒 泡 和 元 素 默 认 行 为 的 方法 。 


> D5 
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5. 简 答 jQuery 模拟 用 户 操作 的 方法 。 
6. 通过 bind() 方 法 为 文本 框 绑 定 click() 事 件 , 当 单 击 文本 框 时 弹出 消息 框 , 显 示 提 
示 信 息 ,如 图 11-20 所 示 。 

















[JIE 
CD owebmiam -ox 
每 bind0 方 法 和 二 要件 x| 











宇宙 电子 








图 11-20 题 6 图 


7. 通过 bind() 方 法 为 下 拉 菜 单 绑 定 change() 事 件 ,实现 表格 动态 换 肤 ,如 图 11-21 
所 示 。 




















国 pbAweb\chll\ 习 最 wtll-7htm| PDP-ox| 0 ve 
EF 表 属 动态 境 卫 x 
























































产品 销量 单价 
机 器 人 29 18000 
智能 家 居 12 30000 
电子 摄像 机 60 9800 
选择 颜色 为 表格 换 肤 ， 刁 雪 吕 ] 

















瑟 100% vv 
图 11-21 题 7 图 
8. 通过 one() 方 法 为 div 元 素 绑 定 click() 事 件 : 单 击 div 方块 可 以 改变 元 素 的 外 观 ， 


并 且 显 示 出 当前 第 几 个 方块 被 单 击 ,总 共有 几 个 方块 被 单 击 , 且 每 个 方块 只 能 被 改变 一 次 
样式 ( 实 线 边框 变 为 双 线 边框 ) ,如 图 11-22 所 示 。 



































站 pswebvchll 习 是 wall-8.html 这 ee DawebNchll 习 归 wtll-8.html Cs 
ne 方法 郑 定 事件 但 ie (方法 禁 定 事件 


Div 元 共 2 个 被 


单 击 绿色 方块 .. 























可 100% ~ 下 100% ~ 





图 11-22 题 8 图 
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9. 设计 一 个 3 行 2 列 的 表格 ,分 别 添加 表格 的 click 事件 ,数据 行 的 click 事件 和 中 间 
行 两 个 单元 格 的 click 事件 。 然 后 ,对 其 中 一 个 单元 格 设置 为 “没有 阻止 事件 冒 泡 ”, 另 一 
个 单元 格 设置 为 “阻止 了 事件 冒 泡 ”, 如 图 11-23 所 示 。 编 写 jQuery 程序 实现 上 述 功能 。 











EMS Sl 























































































































ad 国 DAweb\chl1\ 习 加 vtl1-9html Pp-ox| 站 去 机 | | ES 国 国 ownamp-cx| 从容 询 
EE x EE E 
没有 限 止 事件 冒 泡 | 阻止 了 事件 冒 泡 了 没有 阻止 事件 冒 泡 阻止 7 了 事件 冒 泡 













































































或 100% ~ 

















图 11-23 题 9 图 
10. 使 用 jQuery 模拟 悬 停 事 件 的 hover() 方 法 实现 以 下 功能 , 当 鼠 标 指 针 指 向 图 片 
时 为 图 片 添加 边框 ,鼠标 指针 移出 图 片 时 去 掉 边 框 ,如 图 11-24 所 示 。 


FE 区 
区 








EEC EEC 
导 使 用 Queny 模 拟 悬 停 事件 使 用 Que， 


























图 11-24 题 10 图 
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动画 可 以 更 直观 生动 地 表现 出 设计 者 的 意图 ,在 网 页 中 肉 入 动画 已 成 为 近来 网 页 设 
计 的 一 种 趋势 ,而 程序 开发 人 员 一 般 都 不 太 擅 长 实现 页 面 中 的 动画 效果 ,但 是 利用 
jQuery 中 提供 的 动画 和 特效 方法 ,能 够 轻松 地 为 网 页 添加 精彩 的 视觉 效果 ,给 用 户 一 种 


全 新 的 体验 。 





121 jQuery 的 动画 方法 简介 


jQuery 的 动画 方法 总 共 分 为 4 类 。 

。 基本 动画 方法 : 既 有 透明 度 渐变 ,又 有 滑动 效果 ,是 最 常用 的 动画 效果 方法 。 

。 滑动 动画 方法 : 仅 适 用 滑动 渐变 动画 效果 。 

。 淡 入 淡出 动画 方法 : 仅 适 用 透明 度 渐变 动画 效果 。 

。 自 定义 动画 方法 : 作为 上 述 三 种 动画 方法 的 补充 和 扩展 。 

利用 这 些 动 画 方法 ,jQuery 可 以 很 方便 地 在 HTML 元 素 上 实现 动画 效果 , 见 














表 12-1。 
表 12-1 jQuery 中 的 动画 方法 
方 ” 法 描 述 
show() 用 于 显示 出 被 隐藏 的 元 素 
hide() 用 于 隐藏 可 见 的 元 素 
slideUp() 以 滑动 的 方式 隐藏 可 见 的 元 素 





slideDown() 


以 滑动 的 方式 显示 隐藏 的 元 素 





slideToggle() 


使 用 滑动 效果 ,在 显示 和 隐藏 状态 之 间 进 行 切换 























fadeln() 淡 入 效果 来 显示 一 个 隐藏 的 元 素 

fadeTo() 使 用 淡出 效果 来 隐藏 一 个 

fadeToggle() 在 fadeIn() 和 fadeOut() 方 法 之 间 切 换 

animate() 用 于 创建 自 定义 动画 的 函数 

stop() 用 于 停止 当前 正在 运行 的 动画 

delay() 用 于 将 队列 中 的 函数 延 时 执行 

finish() 停止 当前 正在 运行 的 动画 .删除 所 有 排队 的 动画 ,并 完成 匹配 元 素 所 有 的 动画 
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122 显示 与 隐藏 效果 


页 面 中 元 素 的 显示 与 隐藏 效果 是 最 基本 的 动画 效果 ,jQuery 提供 了 hide() 和 show() 方 
法 来 实现 此 功能 。 


12.2.1 隐藏 元 素 的 方法 


hide() 方 法 用 于 隐藏 页 面 中 可 见 的 元 素 , 按 照 指定 的 隐藏 速度 ,元 素 逐 渐 改 变 高 度 、 
宽度 .外 边 距 ,内 边 距 以 及 透明 度 ,使 其 从 可 见 状态 切换 到 隐藏 状态 。 
hide( ) 方 法 相当 于 将 元 素 CSS 样式 属性 display 的 值 设 置 为 none, 它 会 记 住 原来 的 
display 的 值 。hide() 方 法 有 两 种 语法 格式 。 
(1) 不 带 参数 的 形式 ,用 于 实现 不 带 任何 效果 的 隐藏 匹配 元 素 , 其 语法 格式 如 下 : 
hide() 
例如 ,要 隐藏 页 面 中 的 全 部 图 片 , 可 以 使 用 下 面 的 代码 。 
$ ("img") .hige (); 
(2) 带 参数 的 形式 ,用 于 以 优雅 的 动画 隐藏 所 有 匹配 的 元 素 , 并 在 隐藏 完成 后 可 选择 
地 触发 一 个 回调 函数 ,其 语法 格式 如 下 : 
hide (speed, [callback]) 
参数 说 明 如 下 。 
。 speed: 参数 speed 表示 元 素 从 可 见 到 隐藏 的 速度 。 其 默认 为 0, 可 选 值 为 slow、 
normal fast 和 代表 毫秒 的 整数 值 。 在 设置 速度 的 情况 下 ,元素 从 可 见 到 隐藏 的 
过 程 中 ,会 逐渐 地 改变 其 高 度 .宽度 .外 边 距 、 内 边 距 和 透明 度 。 
。 callback: 可 选 参数 ,用 于 指定 隐藏 完成 后 要 触发 的 回调 函数 。 
例如 ,要 在 500 毫秒 内 隐藏 页 面 中 的 id 为 logo 的 元 素 , 可 以 使 用 下 面 的 代码 。 
$ ("#10go") .hige (500)7 
jQuery 的 任何 动画 效果 ,都 可 以 使 用 默认 的 3 个 参数 ,slow (600 毫秒 )、normal 


(400 毫秒 ) 和 fast(200 毫秒 ) 。 在 使 用 默认 参数 时 需要 加 引号 ,例如 show("slow"), 使 用 
自 定义 参数 时 ,不 需要 加 引号 ,例如 show(500) 。 


12.2.2 显示 元 素 的 方法 
show() 方 法 用 于 显示 页 面 中 隐藏 的 元 素 , 按 照 指定 的 显示 速度 ,元 素 逐 渐 改 变 高 度 、 


宽度 、 外 边 距 、 内 边 距 以 及 透明 度 ,使 其 从 隐藏 状态 切换 到 完全 可 见 状态 。 
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show() 方 法 相当 于 将 元 素 CSS 样式 属性 display 的 值 设 置 为 block 或 inline 或 除了 
none 以 外 的 值 , 它 会 恢复 为 应 用 “display:none” 之 前 的 可 见 属 性 。show() 方 法 有 两 种 语 
法 格式 。 

(1) 不 带 参 数 的 形式 ,用 于 实现 不 带 任何 效果 的 显示 匹配 元 素 ,其 语法 格式 如 下 : 

show() 

例如 ,要 显示 页 面 中 的 全 部 图 片 ,可 以 使 用 下 面 的 代码 。 

$ ("img") .show()7 

(2) 带 参数 的 形式 ,用 于 以 优雅 的 动画 显示 所 有 匹配 的 元 素 , 并 在 显示 完成 后 可 选择 
地 触发 一 个 回调 函数 ,其 语法 格式 如 下 : 

show (speed, [callback]) 


参数 说 明 等 同 于 hide() 方 法 的 参数 说 明 , 这 里 不 再 歼 述 。 
例如 ,要 在 500 毫秒 内 显示 页 面 中 的 id 为 logo 的 元 素 , 可 以 使 用 下 面 的 代码 。 





$ (# 10go") .show (500); 


【 例 12-1】 显示 与 隐藏 动画 效果 示例 。 本 例文 件 12-1. html 在 浏览 器 中 的 显示 效果 
如 图 12-1 所 示 。 
代码 如 下 : 


<html> 
<head> 
<title> 显 示 与 隐藏 动画 效果 < /title> 
< script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
< /head> 
<body> 
<div> 
< input type= "button" value= "显示 图 片 " id= "showDefaultBtn"/> 
< input type= "button" value= "隐藏 图 片 " id "higeDefaultBtn"/> 
< input type= "button" value= " 慢 速 显示 " id= "showSlowBtn"/> 
< input type= "button" value= " 慢 速 隐藏 "ic "higeslowBtn"/> <br/> 
< :input type= "button" value= "显示 完成 调用 指定 函数 " 
id "showCallBackBtn"/> 
<input type= "button" value= " 史 藏 完成 调用 指定 函数 " 
ic "hideCallBackBtn"/> 
</div> 
<hr/> 
< img idF "showImg" src= "images/01.jpg"> 
< script type= "text/javascript"> 


$ (function(e) { 
$ (# showDefaultBin") .click (function(){ 
$ (# showImg") .show (); // 正 常 显 示 图 片 


Ds; 
$ (#hideDefaultBin") .click (function() { 
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图 12-1 例 12-1 的 页 面 显示 效果 


$ (# showImg") -hide (); // 正 常 隐藏 图 片 
Ds; 
$ ( 啡 showSlowBtn") .click (function() { 
$ (# showImg") .show (1000) ; // 慢 速 显 示 图 片 
Ds; 
$ ( 啡 hideslowBtn") .click (function() { 
$ ("# showImg") -hige (1000) ; // 慢 速 隐藏 图 片 
Ds; 
$ ( 啡 showCallBackBtn") .click (function() { 
$ ( 啡 showImg") .show ("slow", function () { 
alert ("图片 显示 完毕 ,谢谢 欣赏 。"); 
D; 
D; 
$ (#higeCallBackBtn") .click (fnction(){ 
$ ("showImg") .hige ("slow", function () { 
alert ("图片 已 被 隐藏 , 单 击 显示 重新 欣赏 。"); 
D; 
D; 













// 动 画 结束 后 ,调用 指定 函数 


// 弹 出 消息 框 


// 弹 出 消息 框 


// 动 画 结束 后 ,调用 指定 的 函数 
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【说 明 】 在 上 面 的 代码 中 , 单 击 * 显 示 完 成 调用 指定 函数 "按钮 显示 动画 , 当 显示 动画 
结束 后 ,调用 show() 方 法 的 指定 回调 函数 ,弹出 消息 框 显示 ”图 片 显示 完毕 ,谢谢 欣赏 .” 
的 提示 信息 ; 单 击 “ 隐 藏 完成 调用 指定 函数 ”按钮 隐藏 动画 , 当 隐 藏 动画 结束 后 ,调用 了 
hideO 〇 ,方法 的 指定 回调 函数 ,弹出 消息 框 显示 “图 片 已 被 隐藏 , 单 击 显示 重 新 欣赏 ”的 提 
示 信 息 。 


12.2.3 切换 元 素 的 显示 状态 


jQuery 中 提供 的 toggle() 方 法 可 以 实现 交替 显示 和 隐藏 元 素 的 功能 , 即 自动 切换 
hide() 和 show() 方 法 。 该 方法 将 检查 每 个 元 素 是 否 可 见 。 如 果 元 素 已 隐藏 , 则 运行 
show() 方 法 。 如 果 元 素 可 见 , 则 运行 hide() 方 法 ,从 而 实现 交替 显示 、 隐 藏 元 素 的 效果 。 
关于 toggle() 方 法 的 用 法 ,在 第 11 章 中 已 经 详细 讲解 ,这 里 讲解 一 个 使 用 toggle( ) 方 法 
实现 切换 元 素 显 示 状 态 的 实例 。 

【 例 12-2】 切换 元 素 的 显示 状态 示例 ,本 例文 件 12-2. html 在 浏览 器 中 的 显示 效果 
如 图 12-2 所 示 。 
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羽 100% > 











图 12-2 例 12-2 的 页 面 显示 效果 


代码 如 下 : 


<html> 
<head> 

<title> 切 换 元 素 的 显示 状态 < /title> 
<style> 
#coontent{ 

border: Grx double blue; // 双 线 蓝 色 边框 
} 
</style> 
< script src= "js/jqvuery- 3.2.1.min.js" type= "text/javascript"> < /script> 
< script type= "text/javascript"> 

$ (document) .ready (function() { 
$ ("button") .click (function () { 
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$ ("div") .toggle(); 
Ds; 
Ds; 

< /script> 
< /head> 
<body> 

<button type= "putton"> 切 换 显示 状态 < /button> <br/><br/> 

<div id "content"> 宇 窗 电 子 采用 标准 化 和 定制 化 服务 相 结 合 …… (此 处 省 略 文字 ) 


【说 明 】 页 面 加 载 后 , 单 击 按钮 可 以 看 到 div 元 素 被 隐藏 起 来 ;再 次 单 击 按钮 可 以 看 
到 div 元 素 显示 出 来 。 连 续 单 击 按钮 ,可 以 看 到 div 元 素 在 隐藏 与 显示 之 间 反 复 切换 。 


123 淡 入 淡出 效果 


如 果 在 显示 或 隐藏 元 素 时 不 需要 改变 元 素 的 宽度 和 高 度 ,只 单独 改变 元 素 的 透明 度 
时 ,就 需要 使 用 淡 入 淡出 的 动画 效果 。 


12.3.1 淡 入 效果 
fadeIn() 方 法 用 于 淡 入 显示 已 隐藏 的 元 素 。 与 show() 方 法 不 同 的 是 ,fadelIn() 方 法 


只 是 改变 元 素 的 不 透明 度 ,该 方法 会 在 指定 的 时 间 内 提高 元 素 的 不 透明 度 ,直到 元 素 完 全 
显示 。 语 法 格式 如 下 : 


fadeIn (speed callback) 

参数 说 明 如 下 。 

。 speed: 参数 speed 是 可 选 的 ,用 来 设置 效果 的 时 长 。 其 取 值 可 以 为 slow fast 和 
表示 毫秒 的 整数 。 


。 callback: 参数 callback 也 是 可 选 的 ,表示 淡 入 效果 完成 后 所 执行 的 函数 名 称 。 
12.3.2 淡出 效果 


jQuery 中 的 fadeOut() 方 法 用 于 淡出 可 见 元 素 。 该 方法 与 fadeIn() 方 法 相反 ,会 
指定 的 时 间 内 降低 元 素 的 不 透明 度 , 直 到 元 素 完 全 消失 。 
fadeOnut() 方 法 的 基本 语法 格式 如 下 : 
fadeout (speed callback) 
其 参数 的 含义 与 fadeIn() 方 法 中 参数 的 含义 完全 相同 。 
【 例 12-3】 淡 入 与 淡出 动画 效果 示例 。 单 击 “ 图 片 淡 入 ”按钮 ,可 以 看 到 3 幅 图 片 同 
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时 淡 入 ,但 速度 不 同 ; 单 击 “图 片 淡 出 "按钮 ,可 以 看 到 3 幅 图 片 同时 淡出 ,但 速度 不 同 。 本 
例文 件 12-3. html 在 浏览 器 中 的 显示 效果 如 图 12-3 所 示 。 





























二 oo 
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图 12-3 例 12-3 的 页 面 显 示 效 果 


代码 如 下 : 


<html> 
<head> 
<title> 淡 人 与 淡出 动画 效果 < /title> 
< style> 
inmg{ 
border: 10px solid # cdo; // 图 片 加 边框 
margin- top: 10px; 
} 
</style> 
< script src="js/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
< script type= "text/javascript"> 
$ (dpcument) .ready (functicn (){ 
$ (#btnFadeIn") .click (function() { 


$ ("# imgl") .fadeIn()7 // 正 常 淡 入 
$ ( 啡 img2") .fadeIn ("slow"); // 慢 速 淡 入 
$ ("# img3") .fadeIn (3000) ; // 自 定义 淡 入 速度 ,更 加 缓慢 
D; 
$ (#btnFadeout") .click (function() { 
$ ("4 imgl") .fadeout (); // 正 常 淡出 
$ (W# img2") .fadeOut ("slow") ; // 慢 速 淡出 
$ ("# img3") .fadeOut (3000)7 // 自 定义 淡出 速度 ,更 加 缓慢 
D; 
D; 
</script> 
< /head> 
<body> 


< 户 不 同 速 度 的 淡 入 与 淡出 动画 效果 < /p> 
<button id= "btnFadeIn"> 图 片 淡 入 < /button> 
<button id= "pinFadeout"> 图 片 淡出 < /button> 
<br><br> 

< img src= "images/01.jpg" id "imgl"/> 

< img src= "images/02.jpg" id= "img2"/> 

< img src= "images/03.jpg" id- "img3"/> 
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< /body> 
< /htm> 


12.3.3 元 素 的 不 透明 效果 


fadeTo() 方 法 可 以 把 元 素 的 不 透明 度 以 渐进 方式 调整 到 指定 的 值 。 这 个 动画 效果 只 
是 调整 元 素 的 不 透明 度 , 即 匹配 元 素 的 高 度 和 宽度 不 会 发 生变 化 。 该 方法 的 基本 语法 格 
式 如 下 : 


fadeTo (speed, opacity, callback) 

参数 说 明 如 下 。 

。 speed: 表示 元 素 从 当前 透明 度 到 指定 透明 度 的 速度 ,可 选 值 为 slow、normal,fast 
和 代表 毫秒 的 整数 值 。 

。 opacity: 这 是 必 选 项 ,表示 要 淡 入 或 淡出 的 透明 度 , 其 值 必须 是 介 于 0. 00 与 1. 00 
的 数字 。 


。 eallback: 这 是 可 选项 ,表示 fadeTo() 函 数 执行 完 之 后 ,要 执行 的 函数 。 
12.3.4 ”交替 淡 入 淡出 效果 


jQuery 中 的 fadeToggle() 方 法 可 以 在 fadeIn() 方 法 与 fadeOut() 方 法 之 间 进 行 切 
换 。 如 果 元 素 已 淡出 , 则 fadeToggle() 方 法 会 向 元 素 添 加 淡 入 效果 。 如 果 元 素 已 淡 入 , 则 
fadeToggle() 方 法 会 向 元 素 添加 淡出 效果 。 

fadeToggle() 方 法 的 基本 语法 格式 如 下 : 


fadeToggle (speed, callback) 

其 参数 说 明 与 fadeIn() 方 法 中 的 参数 说 明 完 全 相同 。 

fadeToggle() 方 法 与 fadeTo() 方 法 的 区 别 是 ,fadeToggle( ) 方 法 将 元 素 隐藏 后 元 素 
不 再 占据 页 面 空间 ,而 fadeTo() 方 法 隐藏 后 的 元 素 仍 然 占据 页 面 位 置 。 

【 例 12-4】 元 素 的 交替 淡 入 淡出 和 不 透明 效果 示例 。 单 击 “ 图 片 交替 淡 入 淡出 ” 按 
钮 ,可 以 看 到 3 幅 图 片 以 不 同 的 速度 交替 淡 入 淡出 ; 单 击 “ 图 片 不 透明 效果 ”按钮 ,可 以 看 
到 3 幅 图 片 设置 了 不 同 的 不 透明 效果 。 本 例文 件 12-4. html 在 浏览 器 中 的 显示 效果 如 
图 12-4 所 示 。 


代码 如 下 : 
<html> 
< head> 
<title> 元 素 的 交替 淡 入 淡出 和 不 透明 效果 < /title> 
<style> 
irg{ 
border: 10px solid #ddd; // 图 片 加 边框 
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图 12-4 例 12-4 的 页 面 显 示 效 果 


margin- top: 10px; 
} 
</style> 


< script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 


< script type= "text/javascript"> 
$ (Gopcument) .ready (function() { 
$ (#btnFadeToggle") -click(functicn (){ 
$ (# imgl") .faceToggle (); 
$ (# img2") .fadeToggle ("slow"); 
$ ("# img3") .fadeToggle (3000)7 
Ds; 
$ ("# btnFadeFadeTo") .click (function() { 
$ ("# imgl") .fadeTo ("slow",0.15); 
$ (# img2") .fadeTo (™" 10.4); 
$ (# img3") .fadeTo ("slow",0.7); 
Ds; 
D; 
</script> 
< [head> 
<bodqy> 


/正常 淡 人 淡出 速度 
// 慢 速 淡 入 淡出 
// 自 定义 淡 入 淡出 速度 ,更 加 缓慢 


// 透 明度 值 较 低 
// 透 明度 值 中 等 
// 透 明度 值 较 高 


< 户 图 片 的 交替 淡 入 淡出 和 不 透明 效果 < /p> 
<button id- "btnFadeToggle"> 图 片 交 蔡 淡 入 淡出 < /button> 
<button id "btnFadeFaGeTo"> 图 片 不 透明 效果 < /button> 
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<br><br> 
< img src= "images/01.jpg" ic "ingl"/> 
< img src= "images/02.jpg" id "img2"/> 
< img src= "images/03.jpg" ic "img3"/> 
< /body> 
</htm> 
【说 明 】 fadeToggle() 方 法 将 元 素 隐藏 后 元 素 不 再 占据 页 面 空 间 ,而 fadeTo() 方 法 
隐藏 后 的 元 素 仍 然 占据 页 面 空 间 。 


124 滑动 效果 


在 jQuery 中 提供 了 slideDown() 方 法 (用 于 滑动 显示 匹配 的 元 素 )、slideUp() 方 法 
(用 于 滑动 隐藏 匹配 的 元 素 ) 和 slideToggle() 方 法 (用 于 通过 高 度 的 变化 动态 切换 元 素 的 
可 见 性 ) 来 实现 滑动 效果 。 通 过 滑动 效果 改变 元 素 的 高 度 , 又 称 “ 拉 窗帘 ”效果 。 


12.4.1 向 下 展开 效果 


jQuery 中 提供 了 slideDown() 方 法 用 于 向 下 滑动 元 素 ,该 方法 通过 使 用 滑动 效果 ,将 
逐渐 显示 隐藏 的 被 选 元 素 ,直到 元 素 完全 显示 为 止 ,在 显示 元 素 后 触发 一 个 回调 函数 。 

该 方法 实现 的 效果 适用 于 通过 jQuery 隐藏 的 元 素 ,或 在 CSS 中 声明 “display: none” 
的 元 素 。 语 法 格式 如 下 : 

slideDown (speed [callback]) 

其 参数 说 明 与 fadeIn() 方 法 中 的 参数 说 明 完 全 相同 。 

例如 ,要 在 500 毫秒 内 向 下 滑动 显示 页 面 中 的 id 为 logo 的 元 素 , 可 以 使 用 下 面 的 
代码 。 


$ ("# 1ogo") .slideDown (500)7 


如 果 元 素 已 经 是 完全 可 见 的 , 则 该 效果 不 产生 任何 变化 ,除非 规定 了 callback 函数 。 
12.4.2 向 上 收缩 效果 


jQuery 中 的 slideUp() 方 法 用 于 向 上 滑动 元 素 ,从 而 实现 向 上 收缩 效果 ,直到 元 素 完 
全 隐藏 为 止 。 该 方法 实际 上 是 改变 元 素 的 高 度 , 如 果 页 面 中 的 一 个 元 素 的 display 属性 值 
为 none, 则 当 调用 slideUp() 方 法 时 ,元素 将 由 下 到 上 缩短 显示 。 语 法 格式 如 下 : 
$ (selector) .slideUp (speed, callback) 
其 参数 说 明 与 fadeIn() 方 法 中 的 参数 说 明 完全 相同 。 
例如 ,要 在 500 毫秒 内 向 上 滑动 收缩 页 面 中 的 id 为 logo 的 元 素 , 可 以 使 用 下 面 的 
313 





Web 前 端 开发 实例 教程 一 HIM_ 5+ JavaScript + jQuery 





$ (#10go") .slidedp (500) ; 
如 果 元 素 已 经 是 完全 隐藏 的 , 则 该 效果 不 产生 任何 变化 ,除非 规定 了 callback 函数 。 


12.4.3 ”交替 伸缩 效果 


jQuery 中 的 slideToggle() 方 法 通过 使 用 滑动 效果 (高 度 变化 ) 来 切换 元 素 的 可 见 状 
态 。 在 使 用 slideToggle() 方 法 时 ,如 果 元 素 是 可 见 的 ,就 通过 减 小 高 度 使 全 部 元 素 隐藏 ; 
如 果 元 素 是 隐藏 的 ,就 增加 元 素 的 高 度 使 元 素 最 终 全 部 可 见 。 语 法 格式 如 下 : 


$ (selector) .slideToggle (speed, callback) 


其 参数 的 含义 与 fadeIn() 方 法 中 参数 的 含义 完全 相同 。 

例如 ,要 实现 单 击 id 为 switch 的 图 片 时 ,控制 菜单 的 显示 或 隐藏 (默认 为 不 显示 , 奇 
数 次 单 击 时 显示 ,偶数 次 单 击 时 隐藏 ), 可 以 使 用 下 面 的 代码 。 

$ (# switch") .click (function() { 

$ (#menu") .slideToggle (500); // 显 示 /隐藏 菜单 

D); 

【 例 12-5】 滑动 效果 示例 。 单 击 “ 向 下 展开 ”按钮 ,div 元 素 中 的 内 容 从 上 往 下 逐渐 
展开 ; 单 击 “ 向 上 收缩 "按钮 ,div 元 素 中 的 内 容 从 下 往 上 逐渐 折合; 单 击 “ 交 替 伸 缩 * 按 钮 ， 
div 元 素 中 的 内 容 可 以 向 下 展开 或 向 上 收缩 。 本 例文 件 12-5. html 在 浏览 器 中 的 显示 效 
果 如 图 12-5 所 示 。 
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图 12-5 例 12-5 的 页 面 显示 效果 


代码 如 下 : 


<html> 
<head> 
<title> 滑 动 效 果 示 例 < /title> 
< style type= "text/css"> 
div-panel{ // 显 示 内 容 的 样式 
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margin: Opx; 
Padqing: Spx; 
background: #e5eecc; 
border: solid lpx #c3c3c3; 
text— indent: 2em; 
height: 150px; 
display: none; // 初 始 状态 隐藏 div 中 的 内 容 
} 
</style> 
< Script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
< Script type= "text/javascript"> 
$ (Gocument) .ready (functicn (){ 
$ ( 啡 btnslideDown") .click (function() { 
$ (".panel") .slideDown ("slow"); // 向 下 展开 
Ds; 
$ ("# btnslideUp") .click (function() { 
$ (".panel") .slideUp ("slow"); // 向 上 收缩 
Ds 
$ ("4btnslideUpDown") .click (function() { 
$ (".panel") .slideToggle ("slow"); // 交 蔡 伸 缩 
Ds; 
D; 
< /script> 
< /head> 
<body> 
<div class= "panel"> 
< 户 宇 宙 电 子 经 营 宗旨 < /p> 
< 全 宇宙 电子 采用 标准 化 和 定制 化 服务 相 结合 的 经 营 模式 …… 此 处 省 略 文字 )< /p> 
</div> 
<p align= "center"> 
<button id= "btnsligeDown"> 向 下 展开 < /button> 
<button id= "btnsligeDp"> 向 上 收缩 < /button> 
<button id= "btnslideUppown"> 交 替 伸 缩 < /button> 
</p> 
< /pody> 
< /htm> 


【说 明 】 无 论 元 素 是 完全 可 见 或 完全 隐藏 ,slideToggle() 方 法 实现 的 交替 伸缩 效果 
总 是 能 够 实现 的 。 


125 自 定义 动画 效果 
前 面 已 经 讲解 了 利用 jQuery 提供 的 方法 实现 3 种 动画 效果 ,但 在 许多 情况 下 ,这 些 
方法 仍 无 法 完全 满足 用 户 的 各 种 需求 。 如 果 需 要 对 动画 进行 更 多 控制 ,就 需要 一 些 高 级 


的 自 定义 动画 来 实现 。 
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12.5.1 创建 自 定义 动画 


在 jQuery 中 ,可 以 使 用 animate() 方 法 创建 自 定义 动画 ,将 元 素 从 当前 样式 过 渡 到 指 
定 的 CSS 样式 。 语 法 格式 如 下 : 





animate (styles, speed,easing, callback) 


参数 说 明 如 下 。 

。 styles: 这 是 必 选 项 ,表示 产生 动画 效果 的 CSS 样式 和 值 。 

。 speed: 表示 动画 的 速度 ,默认 值 是 normal, 可 选 值 为 slow .normal fast 和 代表 毫 

秒 的 整数 值 。 
。 easing: 这 是 可 选项 ,表示 在 不 同 的 动画 点 中 设置 动画 速度 的 easing 函数 。 
jQuery 内 置 的 easing 函数 包括 swing 和 linear。 

。 callback: 这 是 可 选项 ,表示 自 定义 动画 完成 后 所 执行 的 函数 名 称 。 

animate() 方 法 本 质 上 是 通过 CSS 样式 将 元 素 从 一 个 状态 改变 为 男 一 个 状态 。CSS 
属性 值 是 逐渐 改变 的 ,这 样 就 可 以 创建 动画 效果 。 对 于 这 些 CSS 属性 而 言 ,只 有 数字 值 
可 创建 动画 (例如 ,"margin:30px") ,而 字符 串 值 无 法 创建 动画 (例如 ,"background-color: 
red") 。 

默认 情况 下 ,所 有 HTML 元 素 的 位 置 都 是 静态 的 ,并 且 无 法 移动 。 如 需 对 位 置 进行 
操作 ,首先 把 元 素 的 定位 (position) 属 性 设置 为 relative fixed 或 absolute。 如 果 没 有 明确 
定义 元 素 的 定位 属性 ,并 试图 使 用 animate() 方 法 移动 元 素 时 ,它们 只 会 静止 不 动 。 

需要 注意 的 是 ,styles 参数 列表 中 的 CSS 样式 采用 DOM 名 称 命名 ,而 非 CSS 属性 名 ; 
DOM 名 称 与 CSS 属性 名 有 所 不 同 ,采用 骆驼 命名 法 ,如 borderWidth、borderLeftWidth 等 。 

【 例 12-6】 自 定义 动画 示例 。 单 击 “ 图 像 下 移 ” 按 钮 ,图 像 下 移 100 像素 ; 单 击 “ 图 像 
右 移 "按钮, 图像 向 右 移 动 200 像素 ,宽度 和 高 度 等 比例 放大 且 透 明度 降低 ; 单 击 “ 环 绕 动 
画 ” 按 钮 ,图 像 沿 顺 时 针 环 绕 一 周 。 本 例文 件 12-6. html 在 浏览 器 中 的 显示 效果 如 图 12-6 
所 示 。 

代码 如 下 : 


<html> 
< head> 
<title> 自 定义 动画 示例 < /title> 
< script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
< style type= "text/css"> 
img{ 
width: 200px; 
height: 150px; 
position: absolute; // 设 置 动画 元 素 absolute 的 绝对 定位 
} 
</style> 
< /head> 
<body> 
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图 12-6 例 12-6 的 页 面 显示 效果 














< input type= "button" value= "图 像 下 移 " id "animateToBottarBtn"/> 
< input type= "button" value= "图 像 右 移 " id "animateToRightBtn"/> 
< input type= "button" value= "环绕 动画 " id "animateToContinueBtn"/> 


<hr/> 
< img src= "images/ccom.jpg" id= "imgshow"/> 
< Script type= "text/javascript"> 
$ (function(e) { 
$ ("#animateTopottorBtn") .click (function() { // 图 像 下 移 按钮 事件 绑 定 
$ ("# imgShow") .animate ({ 
top: +=100px', // 向 下 移动 100px 
Ds; 
Ds 
$ ("# animateToRightBtn") .click (function() { // 图 像 右 移 按钮 事件 绑 定 
$ ("# imgShow") .animate ({ 
Jeft: '+=200px', // 向 右 移动 200px 
opacity: '0.6', // 降 低 透明 度 
width: '+=200px', // 图 片 本 身 宽度 为 200px, 宽 度 等 比例 放大 
height: '+=150px' ”// 图 片 本 身高 度 为 150px, 高 度 等 比例 放大 
},2000); // 慢 速 移动 
D; 
$ ( 啡 animateToContinueBtn") .click (function() { // 环 绕 动画 事件 绑 定 
$ ("# imgShow") -animate ({left: 300}, 1000) // 移 动 路 径 的 第 1 点 
-animate ({top: 200},1000) // 移 动 路 径 的 第 2 点 
.animate ({left: 100}, 600) // 移 动 路 径 的 第 3 点 
.animate (ftap: 100}, 300); // 移 动 路 径 的 第 4 点 
D; 
Ds; 
</script> 
< /pody> 
< /html> 


【说 明 】 在 jQuery 中 使 用 animate() 方 法 创建 自 定义 动画 时 ,必须 明确 定义 元 素 的 
定位 属性 ,该 设置 非常 重要 ,否则 使 用 animate() 方 法 移动 元 素 将 无 法 实现 。 
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12.5.2 动画 队列 


jQuery 可 以 定义 一 组 动画 动作 ,把 它们 放 在 队列 (queue) 中 顺序 执行 。 队 列 是 一 种 
支持 先进 先 出 原则 的 数据 结构 (线性 表 ) , 它 只 允许 在 表 的 前 端 进行 删除 操作 (出 队 ) ,而 在 
表 的 后 端 进 行 插入 操作 (入 队 ) ,如 图 12-7 所 示 。 











图 12-7 队列 的 工作 原理 


1. queue () 方 法 
使 用 queue() 方 法 可 以 管理 指定 动画 队列 中 要 执行 的 函数 。 语 法 格式 如 下 : 


queue (name [callback]) 


参数 说 明 如 下 。 

。 name: 这 是 必 选 项 , 当 只 传人 该 参数 时 ,方法 将 返回 并 指向 第 一 个 匹配 元 素 的 队 
列 ( 将 是 一 个 函数 数组 ,队列 名 默认 是 fx) 。 

。 callback: 这 是 可 选项 ,该 参数 又 分 两 种 情况 , 当 该 参数 是 一 个 函数 时 , 它 将 在 匹配 
的 元 素 的 队列 最 后 添加 一 个 函数 ; 当 该 参数 是 一 个 函数 数组 时 , 它 将 匹配 元 素 的 
队列 用 新 的 一 个 队列 来 代替 (函数 数组 ) 。 

该 方法 的 基本 功能 就 是 从 队列 最 前 端 移 除 一 个 队列 函数 ,并 执行 它 。 页 面 中 每 个 元 
素 均 可 拥有 一 到 多 个 由 jQuery 添加 的 函数 队列 。 在 大 多 数 元 素 中 ,只 使 用 一 个 队列 (名 
为 fx)。 队 列 运行 在 元 素 上 时 异步 地 调用 动作 序列 ,而 不 会 终止 程序 执行 。 典 型 例子 是 
调用 元 素 上 的 多 个 动画 方法 。 例 如 : 

$ ('#f00') .sliqeUp () .fadeIn(); 

当 执行 这 条 语句 时 ,元 素 会 立即 开始 滑动 动画 ,这 时 执行 淡 入 效果 的 方法 被 置 于 fx 
队列 ,只 有 当 滑 动 效果 方法 完成 后 才 会 被 调用 。 而 queue() 方 法 允许 直接 对 这 个 函数 队 
列 进行 操作 。 可 以 新 建 一 个 数组 ,把 动画 函数 依次 放 进 去 ,这 样 更 改动 画 顺 序 .添加 动画 
效果 都 非常 方便 。 然 后 调用 queue() 方 法 将 这 组 动画 函数 数组 加 入 队列 中 ,利用 dequeue() 
方法 取出 函数 队列 中 第 一 个 函数 ,并 执行 它 , 从 而 完成 连续 动画 执行 的 效果 。 

【 例 12-7】 使 用 queue() 方 法 显示 动画 队列 示例 ,本 例文 件 12-7. html 在 浏览 器 中 的 
显示 效果 如 图 12-8 所 示 。 

代码 如 下 : 


<htm> 
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图 12-8 例 12-7 的 页 面 显示 效果 


<head> 


<title> 使 用 queue() 方 法 显示 动画 队列 示例 < /title> 


<style> 
div{ 
margin: 3px; 
width: 40px; 
height: 40px; 
position: absolute; 
left: Opx; 
top: 60px7 
background: blue; 
display: none; 
} 
pt{ 
color: red; 
} 
</style> 


// 设 置 动画 元 素 absolute 绝 对 定位 


// 监 色 背 景 
// 初 始 状态 隐藏 div 中 的 内 容 


< script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 


< /heac> 
<body> 
< 户 队 列 长 度 : < span> < /span>< /p> 
<div>< /div> 
< script type= "text/javascript"> 
var div= $ ("div"); 
function runIt() { 
div.show ("slow"); 
div.animate ({left: '+=200"'},2000); 
div.sligeToggle (1000); 
div.slideToggle ("fast"); 
div.animate ({left: '-=200'},1500); 
div.hige ("slow"); 
div.show (1200); 
div.sligetp ("nomal", runIt); 


// 缓 慢 显 示 蓝 色 的 div 正 方块 
// 每 2000 毫 秒 向 右 移动 200px 
// 交 蔡 伸缩 效果 

/快速 伸缩 效果 

// 每 1500 毫秒 向 左 移动 200px 
// 缓 慢 隐 藏 效果 

// 显 示 时 间 为 1200ms 


// 正 常 速度 向 上 收缩 ,完毕 后 执行 ranit 函数 ,形成 循环 


} 
finction showIt() { 
Var mr div.queve ("fx"); 
$ ("span") .text (n.length); 


// 低 是 默认 的 动画 队列 
// 输 出 当前 队列 的 长 度 
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setTimeout (showIt, 100); 


// 间 隔 100 毫 秒 再 次 执行 showIt 


【说 明 】 在 runIt() 函数 中 定义 了 一 组 动画 动作 ,在 showIt() 函 数 中 调用 queue() 方 


法 显示 默认 的 动画 队列 fx 的 长 度 。 
2. dequeue () 方 法 


用 户 可 以 使 用 dequeue( ) 方 法 为 匹配 元 素 执行 序列 中 的 下 一 个 函数 ,同时 将 其 出 队 。 


语法 格式 如 下 : 
deqheue ([dequeueName]) 


参数 dequeueName 是 队列 的 名 称 。 


【 例 12-8】 使 用 dequeue() 方 法 显示 动画 队列 示例 ,本 例文 件 12-8. html 在 浏览 器 中 


的 显示 效果 如 图 12-9 所 示 。 
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图 12-9 例 12-8 的 页 面 显示 效果 


代码 如 下 : 


<html> 
<head> 


<title> 使 用 degqueue() 方 法 显示 动画 队列 示例 < /title> 


<style> 
#count{ 
margin: 3px; 
width: 40px; 
height: 40px; 
position: absolute; 
left: Opx; 
top: 60px; 
background: blue; 
display: none; 
} 
</style> 
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// 设 置 动画 元 素 absolute 的 绝对 定位 


//[ 蓝 色 背 景 
// 初 始 状 态 隐藏 div 中 的 内 容 





< script src= "js/jquery- 3.2.1.min.js" typer "text/javascript"> < /script> 
< script type= "text/javascript"> 


$ (function() { 
Var div=$ ('#count"'); 
var list= [ // 定 义 动画 函数 数组 
function () {div.show ("slow"); get();}, // 完 成 动画 后 调用 get() 函 数 


function() {div.animate({left: '+=200"'},2000); get ();}, 
// 完 成 动画 后 调用 get() 函 数 
function() {div.sligeToggle (1000); get();}, 
// 完 成 动画 后 调用 get 0) 函数 
function() {div.slideToggle ("fast") ;get();}, 
// 完 成 动画 后 调用 get() 函 数 
finction() {div.div.hige ("slow"); get ();}, 
// 完 成 动画 后 调用 get (0) 函数 
function() {div.show(1200); get ();}, // 完 成 动画 后 调用 get() 函 数 
function() {div.slideUp ("nommal"); get();} 
// 完 成 动画 后 调用 get() 函 数 
]; 
div.queue ('testList', list)7 // 调 用 queue() 方 法 将 动画 函数 数组 加 入 队列 
var get= function() { 
/1/get 0) 函数 中 调用 ceqveve 0 方法 ,执行 队列 中 下 一 个 函数 ,同时 将 其 出 队 
div.dequeve('testList'); 。” // 利 用 deqveve(0) 方 法 取出 函数 队列 中 第 一 个 函数 ,并 执行 它 
} 
$ ('#btn') .bind('click', function() { 


get(); // 单 击 * 开 始 " 按 钮 ,调用 get 0 函数 
Ds; 
Ds; 
< /script> 
< /head> 
<body> 


<div id "comt"> < /div> 
< input icF "btn" type= "button" value= "开始 " /> 
< /body> 
< /htm> 
【说 明 】 程序 中 利用 queue() 方 法 定义 了 一 个 动画 队列 testList ,动画 队列 中 包含 动 
画 函 数 中 定义 的 执行 完成 动画 后 调用 的 get() 函 数 。 在 get() 函 数 中 会 调用 dequeue( ) 方 
法 ,执行 动画 队列 中 下 一 个 函数 ,同时 将 其 出 队 。 按 照 这 样 的 方法 循环 ,动画 队列 中 包含 
的 动画 会 依次 被 执行 ,直至 结束 。 


3. 删除 动画 队列 中 的 成 员 


使 用 clearQueue() 方 法 可 以 删除 匹配 元 素 的 动画 队列 中 所 有 未 执行 的 函数 。 语 法 格 
式 如 下 : 


ClearQueue ( [queueName]) 


参数 queueName 是 队列 的 名 称 。 
【 例 12-9】 在 例 12-9 中 增加 一 个 “停止 "按钮 ,用 于 删除 动画 队列 中 所 有 未 执行 的 动 
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画 , 代 码 如 下 : 


$ ( 啡 stop") -click(function () { 

var myDiv=$ ("div"); 

myDiv.clearveue(); 。”// 删 除 动画 队列 中 所 有 未 执行 的 动画 
Ds; 


单 击 “ 停 止 " 按 钮 ,会 在 执行 完 当前 动画 后 删除 动画 队列 中 所 有 未 执行 的 动画 ,同时 队 
列 长 度 变 成 0, 如 图 12-10 所 示 。 
四 司 DAwebvhl2l2-9 P - ox) 


乱 使 用 queue0 方 法 号 示 动画 x | 























队列 长 度 : 0 





图 12-10 例 12-9 的 页 面 显示 效果 


12.5.3 动画 的 延 时 和 停止 


在 jQuery 中 ,通过 animate() 等 方法 可 以 实现 元 素 的 动画 效果 显示 ,但 在 显示 的 过 程 
中 ,必须 要 考虑 各 种 客观 因素 和 限制 性 条 件 的 存在 ,因此 ,在 执行 动画 时 ,可 通过 stop() 
方法 停止 或 delay() 方 法 延 时 某 个 动画 的 执行 。 

1. 动画 的 延 时 

在 动画 执行 的 过 程 中 ,经 常会 对 动画 进行 延迟 操作 ,需要 使 用 到 delay( ) 方 法 。 语 法 
格式 如 下 : 

Gelay (duration[, queueName]) 

其 中 ,参数 duration 指定 延迟 的 时 间 ,单位 为 毫秒 ;参数 queueName 是 队列 的 名 称 。 

2. 动画 的 停止 

1) stop() 方 法 

stop() 方 法 会 停止 匹配 元 素 正 在 运行 的 动画 ,并 立即 执行 动画 队列 中 的 下 一 个 动画 。 
语法 格式 如 下 : 

stop (clearQneuevgotcEna) 

参数 说 明 如 下 。 

。 clearQueue: 表示 是 否 清空 尚未 执行 完 的 动画 队列 ( 值 为 true 时 表示 清空 动画 队 

列 ) ,默认 为 false, 即 不 删除 。 
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。 gotoEnd: 表示 是 否 让 正在 执行 的 动画 直接 到 达 动 画 结束 时 的 状态 ( 值 为 true 时 
表示 直接 到 达 动 画 结束 时 状态 ) ,默认 为 false。 
2) finish() 方 法 
finish() 方 法 用 于 停止 当前 正在 运行 的 动画 ,并 删除 动画 队列 中 的 所 有 动画 。 语 法 格 
式 如 下 : 


finish([queve]) 


参数 queue 是 队列 的 名 称 。 

finish() 方 法 相当 于 clearQueue() 方 法 加 上 stop() 方 法 的 效果 。 

【 例 12-10】 动画 的 延 时 和 停止 操作 ,本 例文 件 12-10. html 在 浏览 器 中 的 显示 效果 
如 图 12-11 所 示 。 



















































































eS 
] DAweb\ch12\12-10.html pr-oxB 图 DAweb\ch12\12-10.html pr-ox| ee 
多 二 的 下 时 和 停止 损 作 x EE 。 X 
[十 面 | [动画 ] [tp 全 上 | [iaishgL] | [动画 [Etep 人 上 ] [SiaaagE] 
戌 100% ~ 也 100% 














图 12-11 例 12-10 的 页 面 显示 效果 


代码 如 下 : 


<html> 
< head> 
<title> 动 画 的 延 时 和 停止 操作 < /title> 
<style> 
div#test{ 
position: absolutey // 设 置 动 画 元 素 absolute 的 绝对 定位 
width: 60px; 
height: 60pxy 
float: left; 
background- color: red; 
left: 0; 
} 
</style> 
< script src= "js/jquery- 3.2.1.min.js" type= "text/javascript"> < /script> 
< [head> 
< bodqy> 
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<P> 
<button id- "binstart"> 开始 动 画 < /button> 
<button id= "btnpelay"> 延迟 动画 < /button> 
<button id= "btnstopw> stop 停 止 < /button> 
<button id= "btnFinish"> finish 停 止 < /button> 
</p> 
<div id "test"> < /div> 
< script type= "text/javascript"> 
$ ( 啡 btnstart") .click(function() { /开始 动画 
$ (#test") .slideUp (300) .fadeIn (400) .animate ({height: 300}) .animate ({width: 300}) 
.animate ({height: 100}, "slow") .animate ({width: 100}, "slow"); 
Ds; 
$ (#btinDelay") .click (function() { // 延 迟 动画 
$ ( 啡 test") .sligeUp (300) .delay (500) .fadeTn (400) .animate ({height: 300}) .delay (800) 
.animate ({width: 300}) -animate ({height: 100}, "slow") .animate ({width: 100}, "slow"); 
Ds; 
$ (#btnstop") .click(function() { /stop 停止 
$( 啡 test") .stop (true,true); // 立 刻 结束 正在 执行 的 当前 动画 ,并 清空 未 完成 的 动画 队列 
Ds; 
$ (#btnFinish") .click (finction() { //finish 停 止 
$ (#test") .finish () 7 // 停 止 当前 正在 运行 的 动画 ,并 删除 动画 队列 中 的 所 有 动画 


【说 明 】 程序 中 利用 $$("#test"). stop(true,true) 来 停止 动画 ,其 中 的 两 个 参数 均 
设置 为 true, 表 示 立 刻 结束 当前 正在 执行 的 动画 (动画 尚未 完成 ) ,同时 又 清空 未 完成 的 动 
画 队 列 ,使 动画 立刻 停止 ;如 果 和 希望 当前 正在 执行 的 动画 完成 后 继续 执行 动画 队列 中 的 下 
一 个 动画 ,但 不 清空 未 完成 的 动画 队列 (其 余 动画 还 可 以 执行 ), 则 可 以 使 用 代码 $("# 
test"). stop(true) 来 实现 。 


126 综合 案例 


本 章 前 面 讲解 了 jQuery 制作 动画 的 各 种 方法 和 技巧 ,在 掌握 了 这 些 知识 的 基础 上 ， 
下 面 讲解 两 个 综合 的 应 用 案例 。 


12.6.1 制作 折 又 式 导 航 菜单 


当 页 面 中 导航 菜单 的 菜单 项 较 多 时 ,往往 采用 折 释 式 导 航 菜单 只 显示 正在 使 用 的 子 
菜单 ,将 其 余 暂 时 不 用 的 菜单 功能 折合 起 来 ,这 样 就 节省 了 页 面 空 间 。 通 过 jQuery 能 很 
轻松 地 设计 出 这 种 效果 。 

【 例 12-11】 制作 折合 式 导航 菜单 。 单 击 某 个 主 菜单 时 ,将 展开 该 主 菜单 下 的 子 菜 
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单 ,例如 , 单 击 “ 广 告 管理 ” 主 菜单 ,将 显示 如 图 所 示 的 子 菜 
单 。 单 击 “ 退 出 系统 " 主 菜单 将 不 展开 对 应 的 子 菜单 ,而 是 
激活 一 个 超 链 接 。 本 例文 件 12-11. html 在 浏览 器 中 的 显 


示 效 果 如 图 12-12 所 示 。 


代码 如 下 : 


<htm> 
<head> 
<title> 折 秦 式 导航 菜单 < /title> 
< script src= "js/jquery- 3.2.1.min.js" 
type= "text/javascript"> < /script> 
< style type= "text/css"> 


宽度 


di 


} 
dl 


} 


width: 158px; 


margin: Opx; 


font- size: 14px7 

Pagding: Opx; 

margin: Opx; 

width: 146px; 1/ 设置 宽度 
height: 19px; // 设 置 高 度 
background- image: Url (images/title show.gif); 
Padding: Epx Opx Opx 12px; 

Color: #215dc6; 

font- size: 12pK7 

Cursor: hand; 


// 不 显示 下 划 线 


text- decoration: none; 


a: hover { 


Color: #FF6600; 


// 鼠 标 光标 悬 停 


#top{ 


width: 158px; // 设 置 宽度 
height: 30px; // 设 置 高 度 
background- image: Url (images/top.gif); 























fileyWDyweby/chl2/ 综 咏 100% ~ 








// 设 置 菜 单 容器 的 图 12-12 折 丢 式 导航 菜单 


// 设 置 背景 图 片 


链接 的 颜色 是 橘红 色 


// 设 置 背景 图 片 
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#bottom{ 
width: 158px; // 设 置 宽度 
height: 31lpx; // 设 置 高 度 
backgroundr image: url (images/bottam.gif); // 设 置 背景 图 片 

} 

-titlef 
background- image: url (images/title auit.gif); // 设 置 背景 图 片 

} 

.item{ 
width: 146px; // 设 置 宽度 
height: 15px; // 设 置 高 度 
background- image: url (images/item bg.gif); // 设 置 背景 图 片 
Padding: rx Opx Opx 12px; 

Color: #215dc6; 
font- size: 12px7 
Cursor: hand; 
background- position: center; 
background- repeat: no- repeat; // 背 景 图 片 不 重复 
} 
</style> 


< script type= "text/javascript"> 
$ (document) .ready (function () { 
$ ("Gd") .hide (); // 隐 藏 全 部 子 菜单 
$ ("dt[class!= 'title']") .click(function(){ 
if($ (this) .next () .is(": higdden")) { 
//slidepown: 通过 高 度 变化 (向 下 增长 ) 来 动态 地 显示 所 有 匹配 的 元 素 
$ (this) .css ("packgroundImage", "url (images/title hide.gif)");// 改 变 主 菜单 的 背景 
$ (this) -next () .slideDown ("slow"); 
Jelse{ 
$ (this) .css ("backgroundImage", "url (images/title_ show.gif)");// 改 变 主 菜单 的 背景 
$ (this) .next () .sliGeDp ("slow"); 


D; 
< /script> 
< /head> 
<body> 
<div id "top> < /div> 
<dl> 
<dt> 商 品 管理 < /dt> 
<ap 
<div class= "item"><a hre 仁 吃 添加 商品 < /a>< /div> 
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<div class= "itenm><ahre 会 哗 喧 修改 商品 </a></div> 
<div class= "item><ahre 全 啡 性 查 询 商品 </a></div> 
</adad> 
<dt> 会 员 管 理 < /dt> 
<ap 
<div class= "itenm><ahre 全 只 喧 添加 会 员 </a>< /div> 
<div class= "item"><a hre 伍 嘲 吃 修改 会 员 < /a> < /div> 
<div class= "item"> <a hre 伍 啡 吃 权限 设置 < /a> < /div> 
</dd> 
<db> 广 告 管理 < /at> 
<ap 
<div class= "item"> <a hre 全 只 必 新 品 发 布 </a>< /div> 
<div class= "item><ahre 全 只 喧 优 惠 促销 < /a>< /div> 
<div class= "itenm><ahre 人 只 性 友 情 链 接 < /a>< /div> 
</dd> 
<dt class= "title"><a hre= 嘲 吃 退 出 系统 < /a>< /dt> 
</dl> 
<div icF "bottan> < /div> 
< /body> 
< /html 


【说 明 】 本 程序 的 折 私 式 菜单 功能 是 使 用 jQuery 的 滑动 效果 来 实现 的 。 页 面 加 载 
后 ,首先 隐藏 全 部 子 菜单 ,然后 再 为 每 个 包含 子 菜单 的 主 菜单 项 添加 click 事件 ,当主 菜单 
为 隐藏 时 滑动 显示 主 菜单 ,否则 滑动 隐藏 主 菜单 。 


12.6.2 图 片 轮 播 效果 


传统 JavaScript 虽然 也 能 制作 出 各 具 特 色 的 网 页 特效 ,但 其 程序 烦琐 复杂 , 且 浏览 器 
兼容 性 也 较 差 。 而 使 用 jQuery 操作 DOM 非常 方便 ,jQuery 提供 了 非常 人 性 化 的 API 
满足 用 户 的 各 种 需求 ,下 面 的 案例 综合 使 用 了 前 面 讲解 的 基础 知识 ,制作 图 片 轮 播 效果 ， 
大 大 简化 了 编程 的 工作 量 。 

【 例 12-12】〗 制作 图 片 轮 播 效果 。 页 面 加 载 后 ,每 隔 一 段 时 间 ,图 片 自动 切换 到 下 一 
幅 画面 ;用 户 单 击 图 片 右 下 方 的 数字 ,将 直接 切换 到 相应 的 画面 :用户 单 击 链接 文字 ,可 以 
打开 相应 的 网 页 (用 户 可 以 根据 需要 自己 设置 链接 的 页 面 )。 本 例文 件 12-12. html 在 浏 
览 器 中 的 显示 效果 如 图 12-13 所 示 。 
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图 12-13 图 片 轮 播 效果 


代码 如 下 : 


<html> 
< head> 
<title> jQuery 实现 图 片 轮 播 效 果 < /title> 
< script src= "js/jquery- 3.2.1.min.js" typer "text/javascript"> < /script> 
< style type= "text/css"> 


#banner{ /广告 条 容器 的 样式 
position: relative; // 相 对 定位 
width: 940pz; /广告 条 容器 的 宽度 为 940pxx 
height: 52%px; /广告 条 容器 的 高 度 为 529px 
border: lpx solid # 666; 
cverflow: hidqeny // 洲 出 隐藏 
font— size: 16px 

} 

#banner list img{ // 图 像 的 样式 
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border: Opx; 
} 
#banner bg{ 
position: absolute; 
bottam: 0; 
background- color: #000; 
height: 30px; 
filter: Alpha (Opacity= 30); 
‘Opacity: 0.3; 
Z- ingdex: 1000; 
Cursor: pointer; 
width: 940px; 
} 
#banner info{ 
position: absolute; 
bottam: drx; 
left: Stx; 
height: 22px; 
Color: #fff; 
2- index: 10017 
Cursor: pointer 
} 
#banner text{ 
position: absolute; 
width: 120px; 
2Z- index: 1002; 
right: 3px; 
bottam: 3px; 
} 
#banner ul{ 
position: absolute; 
list- style- type: none; 
filter: Alpha (Opacity= 80); 


display: block; 

Color: #FFF; 

border: #e5eaff lpx solig; 
background- color: # 6f4f677 
Cursor: pointer; 

margin: 07 

font— size: 16px7 


// 图 像 无 边框 


// 广 告 条 底部 背景 的 样式 
// 绝 对 定位 


// 设 置 不 透明 度 


/广告 条 底部 背景 宽度 为 940px 


/广告 条 底部 信息 容器 的 样式 
// 绝 对 定位 


/广告 条 底部 信息 文字 的 样式 


/广告 条 底部 信息 列表 的 样式 
// 绝 对 定位 
// 列 表 无 修饰 


// 位 于 页 面 最 上 层 


// 列 表 项 的 样式 


// 向 左 浮动 
// 快 级 元 素 
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position: absolute; // 让 4 张 图 片 都 可 以 重 又 在 一 起 


<body> 
< 上 宇宙 电子 相册 空间 < /p> 
<div id- "banner> 
<div id "banner bg></div> 
<div id "banner info">< /div> 
<U> 
<li>1< /li> 
<1>2< /li> 
<l>x /1i> 
<1i>4 /i> 
</u> 
<div icF "banner list"> 
<a href= 嘎 " target=" blank"> < img src= "images/01.jpg" title=" 守 宙 夯 
廊 " a 三 "宇宙 画廊 " />< /a> 
<a href= "#" target= " blank"> < img src= "images/02.jpg" title= " 守 窗 夯 
廊 " at 哇 宙 画廊 " />< /a> 
<a href= "#" target= " blank"> < img src= "images/03.jpg" title= " 吁 宙 画 
廊 " alt=" 宇 宙 画 廊 " />< /a> 
<a href= "#" target= " blank"> < img src= "images/04.jpg" title= '" 守 宙 夯 
廊 " at " 哇 审 画廊" />< /a> 
</div> 
</div> 
< Script type= "text/javascript"> 
var tr 0, comt; 
$ (document) .ready (function (){ 
count= $ ( 啡 banner list a") .length; // 链 接 的 数量 
$ ("#banmner list a: not(: first- chilg)") .hide(); 
$ (#banner info") .html ($ ("#banner list a: first- child") .find ("img") 
-attr ('alt')); 
$ (#banner info") .click (function() { /链接 的 单 击 事件 
window.cpen ($ (#banner list a: first- child") .attr ('href'), " blank") 
Ds 
$ ("#banner 1i") .click (finction() { 
var i=$ (this) .text () -1; // 获 取 五 元 素 内 的 值 , 即 1,2,3,4 
rmi; 
if (人 >=count) retum; 
$ ($baner info") html ($ (barner list a") .eq(i).find("ing") .attr ('alt')); 
$ (#baner info") -urbind!() .click (function() { // 从 匹配 的 元 素 中 删除 绑 定 的 事件 
Window-open ($ ("#banner list a") .eq(i) .attr('href'), " blank") 
D; 
// 使 用 filter(": visible") 获 取 所 有 可 见 的 元 素 
$ (#banner list a") .filter(": visible") .fadeout (500) .parent () - 
Children() .eq(i) .fageIn (1000); 
$ (this) .css ({"background": 叶 be2424", "color': '#000'}) .siblings(). 
css({ 
"packground": 啡 6f4f67" 'color': '#fff"}); 
Ds; 
t= setInterval ("showAuto ()", 4000); // 设 置 图 片 切换 的 时 间 间 隔 为 4000ms 
$(" 提 banner") -hover (function() { 
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Ds; 


finction showAto() { 
// 如 果 轮 播 图 片 的 循环 没有 超出 图 片 的 总 数量 , 则 n 的 值 加 1 如 果 超 出 则 n 从 0 开始 
// 计 数 
In>= (count -1) ?0:++n; 
$ ($banner 1i") .eq(n) -trigger ('click'); // 模 拟 用 户 单 击 鼠 标 时 自动 切换 到 下 一 幅 图 片 
< /script> 
< /body> 
</htm> 
【说 明 】 本 程序 使 用 的 技术 要 点 如 下 。 
(1) 本 程序 共有 4 张 轮 播 图 片 ,页 面 加 载 后 ,将 第 一 幅 轮 播 图 片 以 外 的 图 片 全 部 隐藏 。 
(2) 获取 第 一 幅 图 片 的 alt 信息 显示 在 信息 栏 ,并 添加 click 单 击 事件 。 
(3) 为 图 片 右 下 角 的 4 个 链接 添加 单 击 事件 , 单 击 链 接 时 ,分 别 用 fadeOut() fadeIn() 
淡 入 淡出 方法 显示 图 片 的 切换 过 渡 效 果 。 
(4) 使 用 setInterval() 方 法 设置 图 片 切换 的 时 间 间 隔 , 定 时 执行 切换 函数 。 本 例 设 
置 为 4000ms(4s) ,用 户 可 根据 实际 需要 调整 这 个 参数 。 
(5) 使 用 “$("#banner li"). eq(n). triggerCclick); ”语句 模拟 用 户 单 击 鼠标 事件 ， 
切换 图 片 的 时 间 间 隔 到 达 后 将 触发 这 一 事件 ,自动 切换 到 下 一 幅 图 片 。 


习 题 


1. 编写 程序 实现 正方 形 不 同 的 淡 入 与 淡出 动画 效果 ,如 图 12-14 所 示 。 


















































[区 本 
lo] 国 pswebhlzx3mvtlz-Lhn P - Ox | nowebcaxamvwzln p - Cx 0 
己 谈 入 与 淡出 动画 效果 x 各 淡 入 与 洋 出 动 丁 效 果 x | 
淡 入 与 淡出 动画 效果 淡 入 与 淡出 动画 效果 
图 队 淡 入 效果 | | 图 形 溢出 笋 困 
大 100% ~ 咏 100% ~ 











图 12-14 题 1 图 
2. 制作 宇宙 电子 新 闻 中 心 向 上 滚动 的 动态 新 闻 效 果 , 每 隔 3s, 新 闻 信 息 就 会 向 上 滚 
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动 ,如 图 12-15 所 示 。 
























[Fe 区 引 [区 引 
chl2\ 习 时 wtl P - CX 上 pxwebvhlz3 时 vtl P - OX) 0 
ET x |S sameas ] 

新 闻 中 心 新 闻 中 心 
* 电子 摄像 机 未 来 的 发 展 前 最 。 鸭 能 家 后 正在 打破 人们 的 生活 习惯 
*。 闻 亩 电子 学 堂 即日 开始 招生 。 导航 仪 技术 论坛 今日 在 宇宙 中 心 开 其 
。R2C2 机 器 人 即 稳 上 市 * 电子 提 像 机 款 来 的 发 展 前 及 
* 蜀 能 家 居 正 在 打破 人 们 的 生活 习惯 。 字 调 电子 学 堂 即日 开始 招生 
起 100%6 ~ 戈 100% ~ 








图 12-15 题 2 图 


3. 编写 程序 制作 一 个 可 以 展开 与 折 笃 的 导航 菜单 , 单 击 * 导 航 菜单 图片 展开 菜单 ， 
再 次 单 击 “ 导 航 菜单 ”图片 将 菜单 折 且 起 来 ,如 图 12-16 所 示 。 


[Cee Ea 











新 闻 中 心 


公司 简介 


候 100% ~ 

















图 12-16 题 3 图 
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第 1B3 章 ”jQuery UI 插件 的 应 用 


jQuery UI 是 一 个 以 jQuery 为 基础 的 用 户 体验 与 交互 库 , 它 是 由 jQuery 官方 维护 的 
一 类 提高 网 站 开发 效率 的 插件 库 。 本 章 将 详细 地 讲解 jQuery UI 插件 的 使 用 方法 。 


131 jQuery U 概述 


jQuery UI 是 一 个 建立 在 jQuery JavaScript 库 上 的 小 部 件 和 交互 库 , 它 是 由 jQuery 
官方 维护 的 一 类 提高 网 站 开发 效率 的 插件 库 , 用 户 可 以 使 用 它 创建 高 度 交互 的 Web 应 用 
程序 。 


13.1.1 jQuery UI 简介 


1. jQuery UI 的 特性 


jQuery UI 是 以 jQuery 为 基础 的 开源 JavaScript 网 页 用 户 界 面 代码 库 , 它 包含 底层 
用 户 交 互动 画 ,特效 和 可 更 换 主题 的 可 视 控件 ,其 主要 特性 如 下 。 

。 简单 易 用 : 继承 jQuery 简易 使 用 特性 ,提供 高 度 抽象 接口 ,短期 改善 网 站 易 用 性 。 

。 开源 免费 : 采用 MIT& GPL 双 协 议 授 权 ,轻松 满足 自由 产品 至 企业 产品 各 种 授权 
需求 。 

。 广泛 兼容 : 兼容 各 主流 桌面 浏览 器 。 包 括 IE 6 十 、Firefox 2 十 Opera 9 十 、 
Chrome 1 十 。 

。 轻便 快捷 : 组 件 间 相对 独立 ,可 按 需 加 载 ,避免 浪费 带宽 拖 慢 网 页 打开 速度 。 

。 标准 先进 : 通过 标准 XHTML 代码 提供 渐进 增强 ,保证 低 端 环境 可 访问 性 。 

。 美观 多 变 : 提供 近 20 种 预 设 主题 ,并 可 自 定义 多 达 60 项 可 配置 样式 规则 ,提供 
24 种 背景 纹理 选择 。 

。 开放 公开 : 从 结构 规划 到 代码 编写 ,全程 开放 .文档 代码 .讨论 ,人 人 均 可 参与 。 

。 强力 支持 : Google 为 发 布 代 码 提供 CDN 内 容 分 发 网 络 支 持 。 

。 完整 汉化 : 开发 包 内 置 包含 中 文 在 内 的 40 多 种 语言 


2. jQuery UI 插件 的 分 类 
jQuery UI 侧重 于 用 户 界面 的 体验 ,根据 其 体验 角度 的 不 同 ,主要 分 为 以 下 3 个 
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(1) 交互 (Interactions)。 这 部 分 主要 展示 一 些 与 鼠标 操作 相关 的 插件 内 容 , 如 拖 动 


(Dragable) .放置 CDropable) ,缩放 (Resizable) 、 复 选 (Selectable) ,排序 (Sortable) 等 。 


(2) 小 部 件 (Widgets)。 这 部 分 包括 一 些 可 视 化 的 小 控件 ,通过 这 些 控件 可 以 极 大 地 


优化 用 户 在 页 面 中 的 体验 。 如 折 秋 面板 (Accordion)、 日 历 (Datepicker)、 对 话 框 
(Dialog) 、 进 度 条 (Progressbar) , 滑 块 (Slider) ,标签 页 (Tabs) 等 。 


(3) 动画 。 这 部 分 包括 一 些 动画 效果 的 插件 ,使 动画 不 再 拘泥 于 animate() 方 法 。 用 


户 可 以 通过 这 部 分 插件 ,实现 更 为 复杂 的 动画 效果 。 


此 党 


13; 


3. jQuery UI 与 jQuery 的 区 如 下 。 


jQuery UI 与 jQuery 的 主要 区 别 如 下 。 

(1) jQuery 是 一 个 js 库 , 主 要 提供 的 功能 是 选择 器 ,属性 修改 和 事件 绑 定 等 。 

(2) jQuery UI 是 在 jQuery 的 基础 上 ,利用 jQuery 的 扩展 性 设计 的 插件 ,提供 了 一 
用 的 界面 元 素 , 诸 如 对 话 框 、 拖 动 行为 .改变 大 小 行为 等 。 


1.2 jQuery UI 的 下 载 


在 使 用 jQuery UI 之 前 ,需要 下 载 jQuery UI 库 。 下 载 步骤 如 下 。 
(1) 在 浏览 器 中 输入 www. jqueryui. com, 进 入 如 图 13-1 所 示 的 页 面 。 目前 ,jQuery 


UI 的 最 新 版 本 是 jQuery UI 1. 12. 1 。 


加 /QuerY 


user interfoce 


Demos 。 Download AplDocumentation Themes Development Support Blog About 


Interactions Download jQuery UI 


112.1 


Whats New in jQuery UI112? 
New theme oa 








1 i et 


图 13-1 jQuery UI 的 下 载 页面 





(2) 单 击 Custom Download 按钮 ,进入 jQuery UI 的 Download Builder 页 面 


(jqueryui. com/download/), 如 图 13-2 所 示 。Download Builder 页 面 中 可 供 下 载 的 有 
jQuery UI 版 本 、 核 心 (UI Core)、 交 互 部 件 (Interactions)、 小 部 件 (Widgets) 和 效果 库 
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(Effects) 。 

jQuery UI 中 的 一 些 组 件 依赖 于 其 他 组 件 , 当 选中 这 些 组 件 时 , 它 所 依赖 的 其 他 组 件 
都 会 自动 被 选中 。 

(3) 在 Download Builder 页 面 的 左下 角 ,可 以 看 到 一 个 下 拉 列 表 框 , 列 出 了 一 系列 为 
jQuery UI 插件 预先 设计 的 主题 ,用 户 可 以 从 这 些 提供 的 主题 中 选择 一 个 ,如 图 13-3 
所 示 。 





Demos Download 。 API Docamentation Themes Development Support 。 Blog About 


Download Builder 














图 13-2 Download Builder 页 面 


Theme 
Select the theme you want to include or design a custom theme 
Base 


C55 Scope: 


If you're having trouble downloading a custom package or theme, please report the issue on GitHub, 











图 13-3 选择 jQuery UI 主题 


(4) 单 击 Download 按钮 , 即 可 下 载 选 择 的 jQuery UI。 


13.1.3 jQuery UI 的 使 用 


jQuery UI 下 载 完成 后 ,将 得 到 一 个 包含 所 选 组 件 的 自 定 义 zip 文件 (jquery-ui-1. 12. 

1. custom. zip) ,解压 该 文件 ,结果 如 图 13-4 所 示 。 
在 网 页 中 使 用 jQuery UI 插件 时 .需要 将 图 13-4 中 的 所 有 文件 及 文件 夹 ( 解 压 之 后 
的 jquery-ui-1. 12. 1. custom 文件 夹 ) 复 制 到 网 页 所 在 的 文件 来 下 ,然后 在 网 页 的 
二 head 二 区 域 添加 jquery-ui. css 文件 、jquery-ui. js 文件 及 external/jquery 文件 夹 下 
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GO “we ,ec BE ,hmstiQuey » tool » jquery-u1121custom » = [|| 过 jgver. P| 
文件 (月 。 编 句 (E) ”可 看 (V) 工具 (D) 帮助 (H) 
组 织 ” 局 打 开 包含 到 库 中 ” 共享” ”新建 文件 去 Ed © 
有 divtcs * 室 称 修改 日 其 类 型 大 小 
本 Cy J external 2017/10/25 16:54 文件 夫 | 
B dvtcs 上 images 2017/10/25 16:54 。 文件 去 
BB dwcs5 目 AuTHoRSsbd 2017/10/25 8:54 。 文本 文档 13 KB 
卡 html5+ © indexhtml 2017/10/25 8:54 。 HTML 文件 32 KB 
卓 JavaF 至 jqueny-uicss 2017/10/25 8:54 计生 样式 表 文 档 36 KB 
旧 tool jquery-uijs 2017/10/25 8:54 JScript Script 文件 509 KB 
站 jul jquery-uimin.css 2017/10/25 8:54 。 层 登 样式 志文 村 31 KB 《 
2017/10/25 8:54 。 Jscript Script 文件 248 KB 
B Ejquery-ui.structure.css 2017/10/25 8:54  ” 层 晤 样式 表 文 档 19 KB 
Bin Biaveyustructuremincss 2017/10/25 8:54 。 屋 合 样式 志文 档 16 KB 
jquery-uitheme.css 2017/10/25 8:54  ” 层 生 样式 表 文 档 17 KB 
hm 2017/10/25 8:54 。 庆生 样式 表 文 村 14 KB 
鲁 jav 目 ucENsEaoa 2017/10/25 8:54 。 文本 文档 2 KB 
Bweb [DD packagejson 2017/10/25 8:54 。 JSON 文件 2 kB 
a tn 理 5 
external 修改 日 时: 2017/10/25 16:54 
攻 文件 夹 





图 13-4 jQuery UI 的 文件 组 成 


jquery. js 文件 的 引用 ,代码 如 下 : 


< link rel= "stylesheet" href= "jquery- ui- 1.12.1.custom/jquery- ui.css" /> 
< script src= "jquery- ui- 1.12.1.custom/extemal/jquery/jquery.js"> 

< /script> 
< script src= "jquery- ui- 1.12.1.custom/jquery- ui.js"> < /script> 
一 旦 引用 了 上 面 3 个 文件 ,开发 人 员 即 可 向 网 页 中 添加 jQuery UI 插件 。 比 如 ,要 在 

网 页 中 添加 一 个 日 期 选择 器 , 即 可 使 用 下 面 代 码 实现 。 

网 页 结构 代码 如 下 : 
<div id "sliger"> < /div> 
调用 日 期 选择 器 插件 的 JavaScript 代码 如 下 : 
< Script> 

$ (function (){ 

$ ("#datepicker") .datepicker (7 


D; 
< /script> 


13.1.4 jQuery UI 的 工作 原理 


jQuery UI 包含 许多 维持 状态 的 插件 , 它 与 典型 的 jQuery 插件 使 用 模式 略 有 不 同 。 
jQuery UI 插件 库 提供 了 通用 的 API, 因 此 ,只 要 学 会 使 用 其 中 一 个 插件 , 即 可 知道 如 何 
使 用 其 他 的 插件 。 本 节 以 进度 条 (progressbar) 插 件 为 例 , 介 绍 jQuery UI 插件 的 工作 
336 


第 13 章 ”jQuery UI 插件 的 应 用 





原理 。 

1. 安装 

为 了 跟踪 插件 的 状态 ,首先 介绍 一 下 插件 的 生命 周期 。 当 插件 安装 时 ,生命 周期 开 
始 ,只 需要 在 一 个 或 多 个 元 素 上 调用 插件 , 即 安装 了 插件 ,比如 ,下 面 的 代码 开始 
progressbar 插件 的 生命 周期 。 

$ (#elem" ) .progressbar ()7 

另外 ,在 安装 时 ,还 可 以 传递 一 组 选项 ,这 样 即 可 重 写 默 认 选 项 ,代码 如 下 : 

$ ("# elem") .progressbar ({value:40}); 

【说 明 】 安装 时 传递 的 选项 数目 多 少 可 根据 自身 的 需要 而 定 , 选 项 是 插件 状态 的 组 
成 部 分 ,所 以 也 可 以 在 安装 后 再 设置 选项 。 

2. 方法 

既然 插件 已 经 初始 化 ,开发 人 员 就 可 以 查询 它 的 状态 或 者 在 插件 上 执行 动作 。 所 有 
初始 化 后 的 动作 都 以 方法 调用 的 形式 进行 。 为 了 在 插件 上 调用 一 个 方法 ,可 以 向 jQuery 
插件 传递 方法 的 名 称 。 

例如 ,为 了 在 进度 条 (progressbar) 插 件 上 调用 value 方法 ,可 以 使 用 下 面 代码 。 

$ ("# elem") .progressbar ("value") ; 

如 果 方 法 接受 参数 ,可 以 在 方法 名 后 传递 参数 。 例 如 ,下 面 代码 将 参数 60 传递 给 
value。 

$(" 提 elem") .progressbar ("value", 60); 

每 个 jQuery UI 插件 都 有 它 自己 的 一 套 基于 插件 所 提供 功能 的 方法 ,然而 ,有 些 方法 
是 所 有 插件 共同 具有 的 ,下 面 分 别 进行 讲解 。 

1) option 方法 


option 方法 主要 用 在 插件 初始 化 之 后 改变 选项 ,例如 ,通过 调用 option 方法 改变 
progressbar( 进 度 条 ) 的 value 为 30, 代 码 如 下 : 





$ (# elem") .progressbar ("option", "value", 30); 
需要 注意 的 是 .上 面 代码 与 初始 化 插件 时 调用 value 方法 设置 选项 的 方法 “$("# 
elem"). progressbar("value" ,60);” 有 所 不 同 , 这 里 是 调用 option 方法 将 value 选项 修改 
为 30。 
另外 ,也 可 以 通过 给 option 方法 传递 一 个 对 象 ,一 次 更 新 多 个 选项 ,代码 如 下 : 
$ ("#4elem") .progressbar ("option", { 
Value: 100, 
disabled: true 
D; 
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需要 注意 的 是 ,option 方法 有 着 与 jQuery 代码 中 取 值 器 和 设置 器 相同 的 标志 ,就 像 
.Css() 和 . attr() ,唯一 的 不 同 就 是 必须 把 传递 字符 串 option 作为 第 一 个 参数 。 

2) disable 方法 

disable 方法 用 来 禁用 插件 , 它 等 同 于 将 disabled 选项 设置 为 true。 例 如 ,下 面 代码 
用 来 将 进度 条 设置 为 禁用 状态 。 





$ ("# elem") .progressbar ("disable"); 
3) enable 方法 


enable 方法 用 来 启用 插件 , 它 等 同 于 将 disabled 选项 设置 为 false。 例 如 ,下 面 代码 
用 来 将 进度 条 设置 为 启用 状态 。 


$ ("# elem") .progressbar ("enable"); 


4) destroy 方法 

destroy 方法 用 来 销毁 插件 ,使 插件 返回 到 最 初 的 标记 ,这 意味 着 插件 生命 周期 的 终 
止 。 例 如 ,下 面 代 码 销毁 进度 条 插件 。 

$ ("# elem") .progressbar ("destroy"); 

一 旦 销毁 了 一 个 插件 ,就 不 能 在 该 插件 上 调用 任何 方法 ,除非 再 次 初始 化 这 个 插件 。 

5) widget 方 法 

widget 方法 用 来 生成 包装 器 元 素 ,或 与 原始 元 素 断 开 连 接 的 元 素 。 例 如 ,下 面 的 代 
码 中 ,widget 将 返回 生成 的 元 素 ,因为 ,在 进度 条 (progressbar) 实 例 中 ,没有 生成 的 包装 
器 ,widget 方法 返回 原始 的 元 素 。 





$ ("# elem") .progressbar ("widget"); 
3. 事件 


所 有 的 jQuery UI 插件 都 有 与 它们 各 种 行为 相关 的 事件 ,用 于 在 状态 改变 时 通知 用 
户 。 对 于 大 多 数 的 插件 , 当 事 件 被 触发 时 ,名 称 以 插件 名 称 为 前 缀 。 例 如 ,可 以 绑 定 进度 
条 的 change 事件 ,一 旦 值 发 生变 化 时 就 触发 ,代码 如 下 : 

$ (# elem") .bind ("progressbarchange", function() { 

alert ("进度 条 的 值 发 生 了 改变 !"); 

Ds; 

每 个 事件 都 有 一 个 相对 应 的 回调 ,作为 选项 进行 呈现 ,开发 人 员 可 以 使 用 进度 条 的 
change 选 项 进行 回调 ,这 等 同 于 绑 定 de 事件 ,代码 如 下 : 





$ (#elem") .progressbar ({ 
Change: function(){ 
alert ("进度 条 的 值 发 生 了 改变 !"); 
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132 jQuery U 的 常用 插件 


jQuery UI 中 提供 了 许多 实用 性 的 插件 ,包括 常用 的 按钮 对 话 框 .进度 条 日 期 选择 
器 等 。 本 节 将 对 jQuery UI 中 常用 的 插件 及 其 使 用 方法 进行 详细 讲解 。 


13.2.1 按钮 插件 


按钮 (Button) 用 来 使 用 带 有 适当 悬 停 (hover) 和 激活 (active) 样 式 的 可 主题 化 按钮 来 
加 强 标准 表单 元 素 (比如 按钮 .输入 框 等 )。 可 用 于 按钮 的 标记 实例 主要 有 button 元 素 或 
者 类 型 为 submit 的 input 元 素 。 

除了 基本 的 按钮 , 单 选 按 钮 和 复 选 框 (input 类 型 为 radio 和 checkbox) 也 可 以 转换 为 
按钮 。 为 了 分 组 单 选 按钮 , Button 也 提供 了 一 个 额外 的 小 部 件 ,名 为 Buttonset。 
Buttonset 通过 选择 一 个 容器 元 素 ( 包 含 单 选 按钮 ) 并 调用 . buttonset () 来 使 用 。 
Buttonset 也 提供 了 可 视 化 分 组 ,因此 当 有 一 组 按钮 时 可 以 考虑 使 用 它 。 

按钮 部 件 (Button Widget) 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 观 的 样式 。 
如 果 需 要 使 用 按钮 指定 的 样式 , 则 可 以 使 用 下 面 的 CSS class 名 称 。 

。 ui-button: 表示 按钮 的 DOM 元 素 。 该 元 素 会 根据 text 和 icons 选项 添加 下 列 
class 之 一 , 即 ui-button-text-only、 ui-button-icon-only、 ui-button-icons-only、 ui- 
button-textricons 。 

。 ui-button-icon-primary: 用 于 显示 按钮 主要 图 标的 元 素 。 只 有 当主 要 图 标 在 
icons 选项 中 提供 时 才 呈 现 。 

。 ui-button-text: 在 按钮 的 文本 内 容 周 围 的 容器 。 

。 ui-button-icon-secondary: 用 于 显示 按钮 的 次 要 图 标 。 只 有 当 次 要 图 标 在 icons 
选项 中 提供 时 才 呈 现 。 

。 uirbuttonset: Buttonset 的 外 层 容 器 。 

按钮 的 常用 选项 及 说 明 见 表 13-1 。 

表 13-1 按钮 的 常用 选项 及 说 明 
选 项 | 类 型 说 明 





disabled | Boolean 如 果 设 置 为 true, 则 禁用 该 button 





要 显示 的 图 标 , 包 括 带 有 文本 的 图 标 和 不 带 有 文本 的 图 标 。 默 认 情 况 下 , 主 





icons | Object | 图 标 显示 在 标签 文本 的 左边 , 副 图 标 显示 在 右边 
要 显示 在 按钮 中 的 文本 。 当 未 指定 时 CnulDb , 则 使 用 元 素 的 HTML 内 容 , 或 
| String 者 如 果 元 素 是 一 个 submit 或 reset 类 型 的 input 元 素 , 则 使 用 它 的 value 属性 ， 


或 者 如 果 元 素 是 一 个 radio 或 checkbox 类 型 的 input 元 素 , 则 使 用 相关 的 
label 元 素 的 HTML 内 容 
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续 表 
选 项 | 类 型 说 明 
oe, Boolea | 是 否 显示 标签 。 当 设置 为 false 时 ,不 显示 文本 ,但 是 此 时 必须 启用 icons 先 
项 ,否则 text 选项 将 被 忽略 





按钮 的 常用 方法 及 说 明 见 表 13-2。 
表 13-2 按钮 的 常用 方法 及 说 明 
































方 法 说 明 
destroy() 完全 移 除 button 功能 。 这 会 把 元 素 返回 到 它 的 预 初始 化 状态 
disable() 禁用 button 
enable() 启用 button 
option(optionName) 获取 当前 与 指定 的 optionName 关联 的 值 
option() 获取 一 个 包含 键 / 值 对 的 对 象 , 键 / 值 对 表示 当前 button 选项 的 哈 希 操作 
option(optionName,value) | 设置 与 指定 的 optionName 关联 的 button 选项 的 值 
option(options) 为 button 设置 一 个 或 多 个 选项 
本 本 刷新 按钮 的 视觉 状态 。 用 于 在 以 编程 方式 改变 原生 元 素 的 选中 状态 或 禁 
用 状态 后 更 新 按钮 状态 
widget() 返回 一 个 包含 button 的 jQuery 对 象 


按钮 的 常用 事件 及 说 明 见 表 13-3。 
表 13-3 ”按钮 的 常用 事件 及 说 明 
事件 说 明 


create(event, ui) 当 创建 按钮 button 时 触发 


【 例 13-1】 通过 使 用 按钮 部 件 和 按钮 分 组 部 件 (Buttonset) 把 复 选 框 显 示 为 切换 按 
钮 样式 。 页 面 加 载 后 ,用 户 既 可 以 选择 复 选 框 分 组 按钮 选中 或 取消 本 组 复 选 框 ,也 可 以 单 
独 选择 或 取消 某 几 个 复 选 框 。 本 例文 件 13-1. html 在 浏览 器 中 的 显示 效果 如 图 13-5 


所 示 。 
站 DAweb\chl3\13-11 PD- OX 全 DAweb\chl3\13-11 PD- Ox 
碟 按 钮 (Button ) 示例 x 息 按 钮 (Button ) 示例 x 
切换 


EEE 
斜体 


起 100%6 ~ 态 100% ~ 


















































13-5 例 13-1 的 页 面 显示 效果 
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代码 如 下 : 


<himl> 
<head> 
<title> 按 钮 Button) 示 例 < /title> 
< link rel= "stylesheet" href— "jquery- ui- 1.12.1.custam/jqvery— ui.css" /> 
< script src= "jaqpery- ui- 1.12.1.0ustaw/extermal/jqyery/jqrery.js"> < /script> 
< script src= "jquery ui- 1.12.1.custam/jquery- ui.js"> < /script> 
< script> 
$ (function() { 
$ (# check") .button ()7 // 把 复 选 框 显示 为 切换 按钮 样式 
$ ("# format") .buttonset ()7 // 分 组 复 选 框 形成 复 选 框 容器 
Ds; 
< /script> 
<style> 
#formmat { margin- top: 2em; } 
</style> 
< /head> 
<body> 
< input type= "checkbox" id= "check"> < label for= "check> 切 换 < /label> 
<div id "format"> 
< input type= "checkbox" id "checklw> < label for= "checklw> 加 粗 < /label> 
< input type= "checkbox" id "check2"> < label for= "check2"> 斜 体 < /label> 
< input type= "checkbox" id= "check3"> < label for= "check3"> 下 划 线 
</label> 
</div> 
< /pody> 
< /html> 


【说 明 】 除了 基本 的 按钮 , 单 选 按钮 和 复 选 框 也 可 以 转换 为 按钮 ,与 单 选 按钮 和 复 选 


框 相关 的 label 元 素 作为 按钮 文本 。 


13.2.2 自动 完成 插件 


自动 完成 (Autocomplete) 插 件 用 来 根据 用 户 输入 的 值 进行 搜索 和 过 滤 , 让 用 户 快 速 


找到 并 从 预 设 值 列 表 中 选择 。 自 动 完 成 插件 类 似 “ 百 度 ” 的 搜索 框 , 当 用 户 在 输入 框 中 输 
和 时 ,自动 完成 插件 提供 相应 的 建议 。 


【说 明 】 自动 完成 插件 的 数据 源 ,可 以 是 一 个 简单 的 JavaScript 数组 ,使 用 source 选 


项 提供 给 自动 完成 插件 即 可 ;也 可 以 是 从 数据 库 中 动态 获取 到 的 数据 。 


自动 完成 部 件 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 观 的 样式 。 如 果 需 要 使 


用 自动 完成 部 件 指 定 的 样式 , 则 可 以 使 用 下 面 的 CSS class 名 称 。 


。 ui-autocomplete: 用 于 显示 匹配 用 户 的 菜单 (menu)。 
。 ui-autocomplete-input: 自动 完成 部 件 (Autocomplete Widget) 实例 化 的 input 
元 素 。 
自动 完成 部 件 的 常用 选项 及 说 明 见 表 13-4。 
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表 13-4 自动 完成 部 件 的 常用 选项 及 说 明 























选 项 类 型 说 明 
菜单 应 该 被 附加 到 哪 一 个 元 素 。 当 该 值 为 null 时 ,输入 域 
dT Seleet 的 父 元 素 将 检查 ui-front class。 如 果 找 到 带 有 ui-front 
| class 的 元 素 ,菜单 将 被 附加 到 该 元 素 。 如 果 未 找到 带 有 
ui-front class 的 元 素 , 不 管 值 为 多 少 ,菜单 将 被 附加 到 body 
如 果 设 置 为 true, 当 菜 单 显 示 时 ,第 一 个 条 目 将 自动 获得 
autoFocus | Boolean 焦点 
按键 和 执行 搜索 之 间 的 延迟 ,以 毫秒 计 。 对 于 本 地 数据 ， 
delay Integer 采用 零 延迟 是 有 意义 的 (更 具 响 应 性 ) ,但 对 于 远程 数据 会 
产生 大 量 的 负荷 ,同时 降低 了 响应 性 
disabled Boolean 如 果 设置 为 true, 则 禁用 该 autocomplete 
执行 搜索 前 用 户 必须 输入 的 最 小 字符 数 。 对 于 仅 带 有 几 
minLength | Integer 项 条 目的 本 地 数据 ,通常 设置 为 零 , 但 是 当 单 个 字符 搜索 
会 匹配 几 千 项 条 目 时 ,设置 个 高 数值 是 很 有 必要 的 
ee Obiect 标识 建议 菜单 的 位 置 与 相关 的 input 元 素 有 关系 。of 选项 
， 默认 为 input 元 素 ,但 是 用 户 可 以 指定 另 一 个 定位 元 素 
Array 或 String 或 Function 
source ( Object request，Function | 定义 要 使 用 的 数据 ,必须 指定 
response(Object data)) 








自动 完成 部 件 的 常用 方法 及 说 明 见 表 13-5。 


表 13-5 自动 完成 部 件 的 常用 方法 及 说 明 














方 法 说 明 
et 关闭 Autocomplete 菜单 。 当 与 search 方法 结合 使 用 时 ,可 用 于 关闭 打 
开 的 菜单 
destroy() 完全 移 除 autocomplete 功能 。 这 会 把 元 素 返 回 到 它 的 预 初始 化 状态 
disable() 禁用 autocomplete 
enable() 启用 autocomplete 





option(option Name) 


获取 当前 与 指定 的 optionName 关联 的 值 





option() 


获取 一 个 包含 键 / 值 对 的 对 象 , 键 / 值 对 表示 当前 autocomplete 选项 的 
哈 希 操作 





option(optionName.value) 


设置 与 指定 的 optionName 关联 的 autocomplete 选项 的 值 





option(options) 


为 autocomplete 设置 一 个 或 多 个 选项 





和 触发 search 事件 ,如 果 该 事件 未 被 取消 则 调用 数据 源 。 当 被 单 击 时 ， 





search([value]) 可 被 类 似 选择 框 按钮 用 来 打开 建议 。 当 不 带 参 数 调用 该 方法 时 , 则 使 
用 当前 输入 的 值 
返回 一 个 包含 菜单 元 素 的 jQuery 对 象 。 虽然 菜单 项 不 断 地 被 创建 和 
widget() 
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销毁 。 菜 单元 素 本 身 会 在 初始 化 时 创建 ,并 不 断 地 重复 使 用 
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自动 完成 部 件 的 常用 事件 及 说 明 见 表 13-6。 


事件 


表 13-6 自动 完成 部 件 的 常用 事件 及 说 明 
说 明 





change(event, ui) 


如 果 输 入 域 的 值 改变 则 触发 该 事件 





close(event, ui) 


当 菜 单 隐藏 时 触发 。 不 是 每 一 个 close 事件 都 伴随 着 change 事件 





create(event, ui) 


当 创 建 autocomplete 时 触发 





当 焦点 移动 到 一 个 条 目 上 (未 选择 ) 时 和 触发。 默认 的 动作 是 把 文本 域 中 的 值 
蔡 换 为 获得 焦点 的 条 目的 值 , 即 使 该 事件 是 通过 键盘 交互 触发 的 。 取 消 该 事 
件 会 阻止 值 被 更 新 ,但 不 会 阻止 菜单 项 获得 焦点 


当 打开 建议 菜单 或 者 更 新 建议 菜单 时 触发 


在 搜索 完成 后 菜单 显示 前 触发 。 用 于 建议 数据 的 本 地 操作 ,其 中 自 定义 的 
source 选项 回调 不 是 必需 的 。 该 事件 总 是 在 搜索 完成 时 触发 ,如 果 搜 索 无 结 
果 或 者 禁用 了 autocomplete, 导 致 菜单 未 显示 ,该 事件 一 样 会 被 触发 


在 搜索 执行 前 满足 minLength 和 delay 后 触发 。 如 果 取 消 该 事件 , 则 不 会 提 
交 请 求 , 也 不 会 提供 建议 条 目 


当 从 菜单 中 选择 条 目 时 触发 。 默 认 的 动作 是 把 文本 域 中 的 值 蔡 换 为 被 选中 
的 条 目的 值 。 取 消 该 事件 会 阻止 值 被 更 新 ,但 不 会 阻止 菜单 关闭 





focus(event, ui) 





open(event, ui) 





response ( event, 


ui) 





search(event, ui) 





select(event, ui) 





【 例 13-2】 通过 使 用 自动 完成 插件 实现 根据 用 户 的 输入 ,智能 显示 查询 列表 的 功 
能 ,如 果 查 询 列表 过 长 ,可 以 通过 为 autocomplete 设置 max-height 来 防止 菜单 显示 太 长 。 
本 例文 件 13-2. html 在 I 浏览 器 中 的 显示 效果 如 图 13-6 所 示 ,在 Chrome 浏览 器 中 的 显 
示 效 果 如 图 13-7 所 示 。 














@ es 动 守成 ( Autocomplete 
C ©file///D:/web/ch13/13-2.h 安 以 


输入 查询 关键 字 ， | 宇宙 | 





ED 已 DAweb\ch1l3\13-21 PD - OX 
感 自动 沈 成 (Autocomplete. x 


输入 查询 关键 字 ， 
| 
| 


宇 害 | I 
宇宙 电子 
宇宙 科技 
宇宙 会 | 
宙 画 廊 


宇宙 电子 
宇宙 科技 
宇宙 会 

宇宙 画廊 











图 13-6 了 正 浏 览 器 中 的 显示 效果 图 13-7 Chrome 浏览 器 中 的 显示 效果 


代码 如 下 : 


<htm> 
<head> 
<title> 自动 完成 (autocomplete) 插 件 < /title> 
< link rel= "stylesheet" hre 全 四 query- ui- 1.12.1.custam/jguery- ui.css" /> 
< script src= qhery ui- 1.12.1.0ustawextermal/jquery/jqrery.js">< /script> 
< script src= "jquery ui- 1.12.1.custom/jquery— ui.js"> < /script> 
<style> 
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-ui— autocomrplete { 
max-height: 100px; ””// 菜 单 最 大 高 度 为 100px, 超 出 高 度 时 出 现 垂直 滚动 条 
averflow- y: auto; // 重 直 滚 动 条 自动 适应 
cverflow- x: hidden;  // 防 止 水 平 滚动 条 
} 
* html .ui- autocamplete { 
max- height: 200px; 
} 
</style> 
< Script> 
$ (function() { 
var datas= [ // 自 定义 的 菜单 项 
"宇宙 电子 " 
"宇宙 科技 "， 
"宇宙 会 展 "， 
"宇宙 画廊 " 
' 哇 宙 社 区 "， 
' 哇 宙 大 学 " 
"宇宙 健身 "， 
" 哇 宙 车 展 " 
呈 宙 学 堂 "， 
" 哇 宙 环保 " 
]; 
$ ("# tags") .autocarplete ({ // 当 输入 内 容 包含 查询 关键 字 时 显示 用 户 自 定义 的 菜单 
Source: datas 
D; 
D; 
< /script> 
< /head> 
<body> 
<div class= "ui- widget"> 
< label for= "tags"> 输 入 查询 关键 字 : < /label> 
< input icF "tags"> 
</div> 
< /pody> 
< /htm> 


【说 明 】 需要 注意 的 是 ,IE 浏览 器 只 能 实现 智能 显示 查询 列表 的 功能 。 如 果 列 表 高 
度 超出 定义 菜单 的 最 大 高 度 , 则 看 不 到 菜单 滚动 条 的 效果 。 使 用 Chrome 浏览 器 可 以 实 
现 这 一 功能 。 


13.2.3 进度 条 插件 


进度 条 被 设计 来 显示 进度 的 当前 完成 百分比 , 它 通过 CSS 编码 灵活 调整 大 小 默认 会 
缩放 到 适应 父 容器 的 大 小 。 

一 个 确定 的 进度 条 只 能 在 系统 可 以 准确 更 新 当前 状态 的 情况 下 使 用 。 一 个 确定 的 进 
度 条 不 会 从 左 向 右 填充 ,然后 循环 回 到 空 ;如 果 不 能 计算 实际 状态 , 则 使 用 不 确定 的 进度 
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条 以 便 提供 用 户 反 馈 。 

进度 条 部 件 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 观 的 样式 。 如 果 需 要 使 用 
进度 条 指定 的 样式 , 则 可 以 使 用 下 面 的 CSS class 名 称 。 

。 ui-progressbar: 进度 条 的 外 层 容 器 。 该 元 素 会 为 不 确定 的 进度 条 另外 添加 一 个 

ui-progressbar-indeterminate class。 

。 ui-progressbar-value: 该 元 素 代表 进度 条 的 填充 部 分 。 

。 ui-progressbar-overlay: 用 于 为 不 确定 的 进度 条 显示 动画 的 覆盖 层 。 

【 例 13-3】 通过 使 用 进度 条 插件 制作 一 个 应 用 程序 加 载 进 度 条 。 网 页 打开 后 ,首先 
显示 “正在 加 载 " 的 提示 ,接着 显示 不 断 更 新 的 进度 条 进度 ,完成 后 显示 提示 文字 “完成 ”。 
本 例文 件 13-3. html 在 浏览 器 中 的 显示 效果 如 图 13-8 所 示 。 
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图 13-8 应 用 程序 加 载 进 度 条 





代码 如 下 : 


<html> 
< head> 
<title> 进度 条 (Progressbar) 插 件 < /title> 
< link rel= "stylesheet" href= "jquery- ui- 1.12.1.custam/jquery- ui.css" /> 
< script src= "jgqnery ui- 1.12.1.0ustaw/extermal/jqrery/jqery.js">< /scrip> 
< script src= "jquery- ui- 1.12.1.custayjquery- ui .js"> < /script> 
<style> 
-ui- progressbar { 
position: relative; // 进 度 条 相对 定位 
} 
.Progress- label { // 提 示 文 字样 式 
position: absolute; // 绝 对 定位 
Jeft: 50%; 
top: px; 
font- weight: bold; 
text- shadow: lpx lpx 0 #fff; 
} 
</style> 
< script> 
$ (function() { 
Var progressbar= $ ("#progressbar"), 
progressLabel= $ (".progress— label"); 
progressbar.progressbar ({ 
value: false, 
Change: finction() { 
progressLabel .text (progressbar.progressbar ("value")+ 鸣 ");// 显 示 进 度 条 当前 的 百分比 
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] 
camplete: function() { 
progressIabel.text ("完成 1"); 
} 
nD; 
fimction progress() { 
var val= progressbar.progressbar ("value") || 0; 
progressbar.progressbar ("value" val+ 1); 
if(val< 99) { 
SetTimeout (progress, 100); 
} 
} 
setTimeout (progress, 3000); 
Ds 
</script> 
< /head> 
<body> 
<div id "progressbar"> < div class= "progress- labelw> 正 在 加 载 ...< /div> 
</div> 
< /pody> 
< /htm> 


13.2.4 滑 块 插件 


滑 块 (Slider) 主要 用 来 拖 动手 柄 选择 一 个 数值 ,基本 的 滑 块 是 水 平 的 ,有 一 个 单一 的 
手柄 ,可 以 用 鼠标 或 箭头 键 进 行 左右 移动 。 

滑 块 部 件 会 在 初始 化 时 创建 带 有 class ui-slider-handle 的 手柄 元 素 , 用 户 可 以 通过 在 
初始 化 之 前 创建 并 追加 元 素 , 同 时 向 元 素 添加 ui-slider-handle class 来 指定 自 定 义 的 手柄 
元 素 。 它 只 会 创建 匹配 value/values 长 度 所 需 的 数量 的 手柄 。 例 如 ,如 果 指 定 “values， 
[1,5,18]”, 且 创建 一 个 自 定 义 手 柄 ,插件 将 创建 其 他 两 个 。 

滑 块 部 件 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 观 的 样式 。 如 果 需 要 使 用 滑 
块 指定 的 样式 , 则 可 以 使 用 下 面 的 CSS class 名 称 。 

。 ui-slider: 滑 块 控件 的 轨道 。 该 元 素 会 根据 滑 块 的 orientation 另外 带 有 一 个 ui- 

slider-horizontal 或 ui-slider-vertical class。 

。 ui-slider-handle: 滑 块 手柄 。 

。 ui-slider-range: 当 设置 range 选项 时 使 用 的 已 选 范 围 。 如 果 range 选项 设置 为 
min 或 max, 则 该 元 素 会 分 别 另 外 带 有 一 个 ui-slider-range-min 或 ui-slider-range- 
max class。 

【 例 13-4】〗 通过 组 合 3 个 滑 块 实现 一 个 简单 的 RGB 调 色 器 。 本 例文 件 13-4. html 

在 浏览 器 中 的 显示 效果 如 图 13-9 所 示 。 
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图 13-9 组 合 滑 块 实现 RGB 调 色 器 


代码 如 下 : 


<html> 
<head> 
<title> 滑 块 Slider) 插 件 < /title> 
< link rel= "stylesheet" href= "jquery- ui- 1.12.1.custamyjquery- ui.css" /> 
< script src= "jgqnery- ui- 1.12.1.0ustaw/exterral/jqrery/jqrery.js"> < /scrip> 
< script src= "jquery- ui- 1.12.1.custawjquery- ui.js"> < /script> 
<style> 
#red, #9green, #blue { 
float: left; 
Clear: left; 
width: 300px; 
margin: 15px; 


background- image: none; 
} 
#red .ui- slider- range { background: #ef2929; } 
#red .ui- slider- handle { border- color: #ef2929; } 
#9green .ui- slider- range { background: #8ae234; } 
#9green .ui- slider- handle { border- color: #8ae234; } 
#blue .Ui- slider- range { background: #729fcf; } 
#blue .ui- slider- handle { border- color: #729fcf; } 
< /style> 
< script> 
fimction hexFYrorRGB(r， gr b) { 
Var hex= [ 
r.tostring(16), 
g-tostring(16), 
b.tostring (16) 
]7 
$-each (hex, function(nr, val) { 
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if(val.length===1) { 
hex[ nr ]= "0"+ val; 
} 
Ds; 
retum hex.join ("") .toUpperCase (); 
} 
function refreshSwatch() { 

Var red- $ ("# red") .sliger ("value”"), 
greerr $ ("#9green") .sliger ("value"), 
blue=$ (#blue") .sliger ("value"), 
hex= hexFrarRGB (red, green, blue); 

$ ("#4 swatch") .css ("background- color", "+hex); 

} 
$ (function() { 

$ (#red, #9green, #blue") .sliger ({ 

orientation: "horizontal"y 


range: "min", 
max: 255, 
value: 127, 
slide: refreshswatchy // 滚 动 滑 块 改变 颜色 
change: refreshSwatch // 单 击 滚动 条 改变 颜色 
Ds; 
$ (# red") .sliger ("value", 255); // 红 色 滑 块 初始 颜色 
$ ("# green") .slider ("value", 140); // 绿 色 滑 块 初始 颜色 
$ (blue") .sliger ("value", 60); // 蓝 色 滑 块 初始 颜色 
Ds; 
< /script> 


< /head> 
<body class= "ui- widget- content" style= "border: 0;"> 
<p class= "ui- state- default ui- cormer- all ui~ helper- clearfix" 
style= "padding: drx;"> 
< span class= "ui- icon ui- icon- pencil" style= "float: left; margin: - Ax 
Spx 0 0;">< /span> 
RGB 调 色 器 
< /> 
<div id "red"> < /div> 
<div id "green">< /div> 
<div id "blue'> < /div> 
<div id "swatch" class= "ui- widget- content Ui- comer- all">< /div> 
< /body> 
< /html> 


13.2.5 旋转 器 插件 


旋转 器 (Spinner) 的 主要 作用 是 通过 向 上 或 者 向 下 的 按钮 和 箭头 键 处 理 ,为 输入 数值 
增强 文本 输入 功能 , 它 允 许 用 户 直接 输入 一 个 值 , 或 通过 键盘 鼠标、 滚轮 旋转 改变 一 个 已 
有 的 值 。 当 与 全 球 化 (Globalize) 结 合 时 ,用户 甚至 可 以 旋转 显示 不 同 地 区 的 货币 和 日 期 。 
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旋转 器 使 用 两 个 按钮 将 文本 输入 覆盖 为 当前 值 的 递增 值 和 递减 值 。 旋 转 器 增加 了 
按键 事件 ,以 便 可 以 用 键盘 完成 相同 的 递增 和 递减 。 旋 转 器 代表 全 球 化 的 数字 格式 和 
解析 。 

旋转 器 部 件 使 用 jQuery UI CSS 框架 来 定义 它 的 外 观 和 感 观 的 样式 。 如 果 需 要 使 用 
旋转 器 指定 的 样式 , 则 可 以 使 用 下 面 的 CSS class 名 称 。 

。 ui-spinner: 旋转 器 的 外 层 容 器 。 

。 ui-spinner-input: 旋转 器 部 件 实例 化 的 一 input 二 元 素 。 

。 ui-spinner-button: 用 于 递增 或 递减 旋转 器 值 的 按钮 控件 。 向 上 按钮 会 另外 带 有 

一 个 ui- spinner-up class, 向 下 按钮 会 另外 带 有 一 个 ui-spinner-down class。 

【说 明 】 不 支持 在 一 input type 一 "number" 之 上 创建 选择 器 ,因为 这 种 操作 会 造成 
与 本 地 旋转 器 的 UI 冲突 。 

【 例 13-5】 通过 旋转 器 插件 制作 一 个 国际 爱心 基金 捐款 表单 。 其 中 可 以 选择 要 捐 
款 的 货币 形式 和 捐款 额 ,货币 形式 使 用 下 拉 菜 单 实现 ,捐款 额 使 用 旋转 器 实现 。 本 例文 
件 13-5. html 在 Chrome 浏览 器 中 的 显示 效果 如 图 13-10 所 示 。 


辐 就 颖 ( Spinner ) 插件 O i ( Spinner ) 插件 
€ C © file///D:/web/ch13/13-5h 安 3 € C ©file///D:/web/ch13/13-5h 安 3 


国际 爱心 基金 捐款 国际 爱心 基金 捐款 





选择 捐款 币 种 ， [元 5[E] 选择 捐款 币 种 ， [区 元 E 
| 美元 5 
设置 捐 坎 额 ， | 1 设置 捐款 额 ， 20 
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代码 如 下 : 


<html> 
<head> 
<title> 旋 转 器 (sbinner) 插 件 < /title> 
< link rel= "stylesheet" href= "jaquery- ui- 1.12.1.custa/jquery- ui.css" /> 
< script src= "jgqnery ui- 1.12.1.0ustaw/extermal/jqery/jqery.js"> < /script> 
< script src= "jquery- ui- 1.12.1.custamjaquery- ui.js"> < /script> 


< script> 
$ (function() { 
$ (# spinner") .spinner ({ 
min: 10, // 最 小 值 为 10, 即 捐款 的 最 低 金额 
max: 2500, // 最 大 值 为 2500, 即 捐款 的 最 高 金额 
step: 10, // 步 长 为 10, 每 次 递增 或 递减 的 金额 
Ds; 
D; 
</script> 
< /head> 
<body> 
<h3> 国 际 爱 心 基金 捐款 < /h3> 
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<P> 
< label for= "currency"> 选择 捐款 币 种 : < /label> 
< select id= "Currency" name= "currency"> 
< option value= "en- Us"> 美 元 $< /option> 
< option value= "de- [EE"> 欧 元 < /option> 
<option value= "ja- JP 日 元 至 < /option> 
< /select> 
</p 
<P> 
< label for="spinner"> 设 置 捐款 额 : < /label> 
< input id= "spinner" name= "spinner" value= "10"> 
</p 
< /body> 
< /htm> 


【说 明 】 需要 注意 的 是 ,IE 浏览 器 不 支持 旋转 器 插件 。 
13.2.6 日 期 选择 器 插件 


日 期 选择 器 (Datepicker) 主 要 用 在 从 弹出 框 或 在 线 日 历 中 选择 一 个 日 期 ,使 用 该 插 
件 时 ,可 以 自 定义 日 期 的 格式 和 语言 ,也 可 以 限制 可 选择 的 日 期 范围 等 。 

默认 情况 下 , 当 相 关 的 文本 域 获得 焦点 时 ,在 一 个 小 的 覆盖 层 打开 日 期 选择 器 。 对 于 
一 个 内 联 的 日 历 , 只 需 简单 地 将 日 期 选择 器 附加 到 div 或 者 span 上 。 

日 期 选择 器 的 常用 方法 及 说 明 见 表 13-7。 


表 13-7 日 期 选择 器 的 常用 方法 及 说 明 




















方 法 说 明 
$. datepicker. setDefaults(settings) 为 所 有 的 日 期 选择 器 改变 默认 设置 
$$. datepicker. formatDate(format,date,settings) | 格式 化 日 期 为 一 个 带 有 指定 格式 的 字符 串 值 
$. datepicker. parseDate(format, value, settings) 从 一 个 指定 格式 的 字符 串 值 中 提取 日 期 
$. datepicker. iso8601Week( date) 确定 一 个 给 定 的 日 期 为 一 年 中 的 第 几 周 : 1 一 53 
$. datepicker. noWeekends 设置 如 beforeShowDay 函数 ,防止 选择 周末 


需要 注意 的 是 ,不 支持 在 二 input type 一 "date" 之 上 创建 日 期 选择 器 ,因为 这 种 操作 
会 造成 与 本 地 选择 器 的 UI 冲突 。 

【 例 13-6】 通过 使 用 日 期 选择 器 插件 选择 日 期 并 格式 化 ,显示 在 文本 框 中 ,在 选择 
日 期 时 ,同时 提供 两 个 月 的 日 期 供 选 择 ,而 且 在 选择 时 ,可 以 修改 年 份 信息 和 月 份 信息 。 
本 例文 件 13-6. html 在 浏览 器 中 的 显示 效果 如 图 13-11 所 示 。 

代码 如 下 : 


<html> 
<head> 
<title> 日 期 选择 器 (Datepicker) 插 件 < /title> 
< link rel= "stylesheet" href— "jquery— ui- 1.12.1.custam/jquery— ui.css" /> 
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< script src= "jgqnery ui- 1.12.1.0ustaw/extermal/jquery/jqery.js"> < /script> 
< script src= "jquery ui- 1.12.1.custam/jqvery— ui .js"> < /script> 


< script> 
$ (function() { 

$ ("4 datepicker") .datepicker ({ 
showButtonPanel: true, // 显 示 按 钮 面板 
nunberofvonths: 2, // 显 示 两 个 月 
changeMonth: true, // 人 允许 切换 月 份 
changsYear: true, // 人 允许 切换 年 月 份 
showEek: true, // 显 示 星 期 
firstDay: 1 // 显 示 每 月 从 第 一 天 开始 

Ds; 


$ (4 fomrat") .change (function() { 
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$ ( 啡 Gatepicker) -datepicker ("aption", "dateFonrat", $ (this) -val ()); 
Ds; 
D; 
</script> 
< /head> 
<body> 
<g 户 日 期 : < input type= "text" id= "datepicker"™> < /p> 
< 户 格式 选项 : <br> 
< select id= "format"> 
< caption value= "myda/yy>mmyada/yyyy 格 式 < /option> 
< option value= "yy- mm Gd"> yyyy-mm dd 格式 < /option> 
<option value= "dM y> 短 日 期 格式 -dM y< /cption> 
< option value= "DD, d MM YY 长 日 期 格式 -DD, aM yy< /aption> 
< /select> 


13.2.7 折 又 面板 插件 


折 生 面板 (Accordion) 用 在 一 个 有 限 的 空间 内 显示 用 于 呈现 信息 的 可 折合 的 内 容 面 
板 , 单 击 头 部 ,展开 或 者 折 和 三 被 分 为 各 个 逻辑 部 分 的 内 容 , 另 外 ,开发 人 员 可 以 选择 性 的 设 
置 当 鼠 标 悬 停 时 是 否 切 换 各 部 分 的 打开 或 者 折 生 状态 。 
折 生 面板 标记 需要 一 对 标题 和 内 容 面 板 ,比如 ,使 用 系列 的 标题 (H3 标签 ) 和 内 容 
div, 代 码 如 下 : 
<div id= "accordion"> 
<h3> 第 一 标题 < /h3> 
<diw> 第 一 内 容 面板 < /div> 
<h> 第 二 标题 < /h3> 
<diw 第 二 内 容 面 板 < /div> 
<h3> 第 三 标题 < /h3> 
<div> 第 三 内 容 面板 < /div> 
</div> 
折 生 面板 的 常用 选项 及 说 明 见 表 13-8。 
表 13-8 折 又 面板 的 常用 选项 及 说 明 




















选 项 类 型 说 明 
active Boolean 或 Integer 当前 打开 哪 一 个 面板 
animate | 909lean 或 Number | 是 否 使 用 动画 改变 面板 , 且 如 何 使 用 动画 改变 面板 
或 String 或 Object 
collapsible | Boolean 所 有 部 分 是 否 都 可 以 马上 关闭 ,允许 折 秋 激活 的 部 分 
disabled Boolean 如 果 设 置 为 true, 则 禁用 该 accordion 
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续 表 
选 项 类 型 说 明 

a Si accordion 头 部 会 做 出 反应 的 事件 ,用 以 激活 相关 的 面板 。 可 以 指 
0 定 多 个 事件 ,用 空格 间隔 

ede Se 标题 元 素 的 选择 器 ,通过 主要 accordion 元 素 上 的 . find() 进 行 应 
和 用 。 内 容 面板 必须 是 紧 跟 在 与 其 相关 的 标题 后 的 同 级 元 素 

heightStyle | String 控制 accordion 和 每 个 面板 的 高 度 

Pe Obiect 标题 要 使 用 的 图 标 ,与 jQuery UI CSS 框架 提供 的 图 标 (lcons) 匹 

配 。 设 置 为 false 则 不 显示 图 标 








折 倒 面板 的 常用 方法 及 说 明 见 表 13-9 。 


表 13-9 折叠 面板 的 常用 方法 及 说 明 











方 法 说 明 
destroy() 完全 移 除 accordion 功能 。 这 会 把 元 素 返回 到 它 的 预 初始 化 状态 
disable() 禁用 accordion 
enable() 启用 accordion 





option(optionName) 


获取 当前 与 指定 的 optionName 关联 的 值 





option() 


获取 一 个 包含 键 / 值 对 的 对 象 , 键 / 值 对 表示 当前 accordion 选项 的 哈 希 
操作 





option(optionName, value) 


设置 与 指定 的 optionName 关联 的 accordion 选项 的 值 





option(options) 


为 accordion 设置 一 个 或 多 个 选项 





refresh() 


处 理 任何 在 DOM 中 直接 添加 或 移 除 的 标题 和 面板 ,并 重新 计算 
accordion 的 高 度 。 结 果 取 决 于 内 容 和 heightStyle 选项 





widget() 





返回 一 个 包含 accordion 的 jQuery 对 象 


折 释 面板 的 常用 事件 及 说 明 见 表 13-10。 


襟 -和 首 


表 13-10 折 和 又 面板 的 常用 事件 及 说 明 
说 明 





activate(event, ui) 


面板 被 激活 后 触发 (在 动画 完成 之 后 )。 如 果 accordion 之 前 是 折 友 的 , 则 ui. 
oldHeader 和 ui. oldPanel 将 是 空 的 jQuery 对 象 。 如 果 accordion 正在 折 笃 ， 
则 ui. newHeader 和 ui. newPanel 将 是 空 的 jQuery 对 象 





beforeActivate(event, ui) 


面板 被 激活 前 直接 触发 。 可 以 取消 以 防止 面板 被 激活 。 如 果 accordion 当前 
是 折 释 的, 则 ui. oldHeader 和 ui. oldPanel 将 是 空 的 jQuery 对 象 。 如 果 
accordion 正在 折 又 . 则 ui. newHeader 和 ui. newPanel 将 是 空 的 jQuery 对 象 





create(event, ui) 


【 例 13-7】 





当 创 建 accordion 时 触发 。 如 果 accordion 是 折 和 至 的 ,ui. header 和 ui. panel 将 
是 空 的 jQuery 对 象 


使 用 Accordion 实现 一 个 折 释 面板 ,默认 第 一 个 面板 为 展开 状态 。 本 例 


文件 13-7. html 在 浏览 器 中 的 显示 效果 如 图 13-12 所 示 。 
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侠 折 嫩 面板 ( Accordion ) 插 .. x 您 折 且 画板 ( Accordion ) 插 .. x 


























字 宙 电子 管理 系统 宇宙 电子 管理 系统 
添加 商品 
修改 商品 新 品 推广 
查询 商品 。R2C2 机 器 人 
。 智 能 家 居 
i 。 电 子 摄像 机 
用 户 管理 用 户 管理 
图 13-12 例 13-7 的 页 面 显 示 效 果 
代码 如 下 : 
<html> 
<head> 


<title> 折 著 面 板 accordion) 插 件 < /title> 

< link rel= "stylesheet" href= "jquery- ui- 1.12.1.custam/jqvery- ui.css" /> 
< script src= "jqyery- ui- 1.12.1.0ustaw/extermal/jqrery/jqrery.js">< /script> 

< script src= "jquery- ui- 1.12.1.custam/jquery- ui.js"> < /script> 


< script> 
$ (function (){ 
$ ("#accordion") .accordion({ 
heightstyle: "fill" // 自 动 设置 折 秋 面板 的 尺寸 为 父 容器 的 高 度 
D; 
D; 
< /script> 
< /head> 
< body> 


<h3 class= "docs"> 宇 宙 电 子 管理 系统 < /h3> 
< div class= "ui- widget— content" style= "width: 350px;"> 
<div id "accordion"> 
<h3> 商 品 管理 < /h3> 
<div> 
< 全 添加 商品 < /p> 
< 全 修改 商品 < /p> 
< 户 查 询 商品 < /p> 
</div> 
<h3> 广 告 管理 < /h3> 
<div> 
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< 户 新 品 推广 < /p> 
<Ul> 
<Jli>R2c2 机 器 人 < /> 
<1 放 智能 家 居 < /1i> 
<1i> 电 子 摄像 机 < /1i> 
</al> 
</div> 
<h3> 用 户 管理 < /h3> 
<div> 
< 户 添 加 用 户 < /p> 
< 户 删 除 用 户 < /p> 
< 户 权 限 设 置 < /p> 
< /div> 
</div> 
</div> 
< /pody> 
< /htm> 
【说 明 】 由 于 折 对 面板 是 由 块 级 元 素 组 成 的 ,默认 情况 下 它 的 宽度 会 填充 可 用 的 水 
平 空 间 。 为 了 填充 由 容器 分 配 的 垂直 空间 ,设置 heightStyle 选项 为 fl, 脚 本 会 自动 设置 
折 芭 面板 的 尺寸 为 父 容器 的 高 度 。 


13.2.8 标签 页 插件 


标签 页 (Tabs) 是 一 种 多 面板 的 单 内 容 区 ,每 个 面板 与 列表 中 的 标题 相关 , 单 击 标签 
页 ,可 以 切换 显示 不 同 的 逻辑 内 容 。 

标签 页 有 一 组 必须 使 用 的 特定 标记 ,以 便 标签 页 能 正常 工作 ,分 别 如 下 。 

。 标签 页 必须 在 一 个 有 序 的 (二 ol 二 ) 或 无 序 的 (二 ul 二 ) 列 表 中 。 

。 每 个 标签 页 的 title 必须 在 一 个 列表 项 (二 1 二) 的 内 部 , 且 必 须 用 一 个 带 有 href 属 

性 的 锚 ( 二 a 二 ) 包 里 。 
。 每 个 标签 页 面板 可 以 是 任意 有 效 的 元 素 . 但 是 它 必 须 带 有 一 个 id, 该 id 与 相关 标 
签 页 的 锚 中 的 哈 希 值 相对 应 。 

每 个 标签 页 面板 的 内 容 可 以 在 页 面 中 定义 好 ,这 种 方式 是 基于 与 标签 页 相关 的 锚 的 
href 上 自动 处 理 的 。 默 认 情 况 下 ,标签 页 在 单 击 时 激活 ,但 是 通过 event 选项 可 以 改变 或 
覆盖 默认 的 激活 事件 。 例 如 ,可 以 将 默认 的 激活 事件 设置 为 鼠标 经 过 标签 页 激活 ,代码 
如 下 


event: "mouseover" 
【 例 13-8】 使 用 标签 页 制作 了 一 个 关于 宇宙 电子 公司 介绍 的 标签 页 , 当 和 鼠标 经 过 标 


签 页 时 打开 标签 页 内 容 , 当 鼠标 二 次 经 过 标签 页 则 隐藏 标签 页 内 容 。 本 例文 件 13-8. 
html 在 浏览 器 中 的 显示 效果 如 图 13-13 所 示 。 
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个 fileyVWDyweby/chl3/13-! P ~ CX 
售 标 攻 页 (Tabs) 


[< 同 @ fley/Dpyweb/chl3/13-LP - OX) Oe 


半 标 和 页 (Tabs ) x 


ET | 


鼠标 二 次 经 过 标签 页 可 以 隐藏 内 容 


宇宙 微 电 子 封装 测试 基地 启动 于 2001 年 ， 
是 一 家 专业 从 训 类 这 体 乓 率 吝 件 和 其 他 电 
本 机 让 和 优秀 供应 商 。 工 厂 具备 

德国 、 目 本 要 对 祭 和 地 民 时 这 和 
最 生病 交 旺 二 和 试 仪器 

















经 营 模式 ”管理 体系 测试 基地 











file:///D:/web/ch13/13-8.html#tabs-3 胞 100% ~ 














files///D:/web/ch13/13-8.htmlstabs-3 所 100% > 


图 13-13 ”标签 页 插件 应 用 示例 


代码 如 下 : 


<html> 
<head> 
< Script> 
$ (function() { 
$ (#tabs") .tabs ({ 
collapsible: true, 


event: "mouseover™" // 将 默认 的 单 击 激活 事件 设置 为 鼠标 经 过 标签 页 激活 


Ds; 
Ds 
</script> 
< /head> 
<body> 
<div id "tabs"> 
<ul> 
<1i><ahre 全 只 tabs-l> 经 营 模式 </a></1i> 
<1i><a href 伍 嘎 tabs- 2> 管 理 体系 </a>< /li> 
<1i><ahre 全 只 tabs-3" > 测试 基地 < /a>< /li> 
</u> 
<div id "tabs- 1™> 
<E>< strong> 鼠标 二 次 经 过 标签 页 可 以 隐藏 内 容 < /strong>< /E> 
< 户 宇 宙 电 子 采 用 标准 化 和 定制 化 服务 相 结 合 的 经 营 模 式 …… 此 处 省 略 内 容 )< /p> 
</div> 
<div id "tabs- 2"> 
<p>< strong> 鼠 标 二 次 经 过 标签 页 可 以 隐藏 内 容 < /strong> < /p> 
< 从 工厂 严格 实行 TSo 900L.ISo 14001 和 人 S 16949 管 理 体系 …… 此 处 省 略 内 容 )< /p> 
</div> 
<div id "tabs- 3™> 
<E><strong> 鼠标 二 次 经 过 标签 页 可 以 隐藏 内 容 < /strong>< /E> 
< 了 全 宇宙 微 电 子 封装 测试 基地 启动 于 2001 年 ,是 一 家 专业 …… 此 处 省 略 内 容 )< /p> 
</div> 
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</div> 
< /pody> 
< /htm> 
通过 上 面 案例 的 讲解 ,读者 一 定 体验 到 jQuery UI 丰富 的 插件 种 类 及 其 强大 的 功能 。 
由 于 篇 幅 所 限 , 这 里 不 再 一 一 叙述 ,读者 可 以 到 jQuery 的 官方 网 站 下 载 学 习 这 些 插 件 的 
用 法 。 


习题 
1. 使 用 jQuery UI 进度 条 插件 制作 如 图 13-14 所 示 的 页 面 。 单 击 “ 进 度 条 随机 值 ” 按 


钮 ,进度 条 显示 随机 生成 的 值 ; 单 击 * 进 度 条 随机 颜色 ”按钮 ,进度 条 显示 随机 生成 的 颜色 。 


mm "x 


CN [a owebvhis 3mv DO - ox re IC (Bowman po- ox 
least x] | 














图 13-14 题 1 图 


2. 使 用 jQuery UI 自动 完成 插件 制作 如 图 13-15 所 示 的 页 面 。 在 文本 框 中 输入 关键 
字 , 实 现 “ 分 类 ”智能 查询 。 


= el 下 区 
CO Dowo sau- ox] (OD ow mo- ox 
| sms (Mutocomplete * | | | eas (Autocomplete.. *| | 


a 
anders | anders 

andreas | andreas 

antal | People 
Products anders andersson 


annhhx10 | andreas 
annk K12 | 四 


annttop C13 andreas johnson 
People | 


anders andersson 


andreas 
andersson 


andreas johnson 





13-15 题 2 图 
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3. 使 用 jQuery UI 折 符 面板 插件 制作 如 图 13-16 所 示 的 页 面 。 页面 加 载 后 , 折 番 面 
板 中 的 每 个 子 面板 都 带 有 图 标 , 单 击 “ 切 换 图 标 ” 按 钮 ,隐藏 子 面板 的 图 标 ,可 以 反复 切换 
图 标的 显示 与 隐藏 状态 。 本 题 需要 在 Chrome 浏览 器 中 才能 看 到 该 效果 。 





Of (Accordion ) 后 * 必 
CG © filey///D:/web/ch13/ 习 题 /xt13-3.htn 窑 以 


图 折 量 面板 ( Accordion ) 括 > 
€ SC Qfile///D:/web/ch13/ 习 题 /xt13-3.htn 窑 | € 


日 经 营 模式 经 营 模式 
管理 体系 管理 体系 


宇宙 微 电 子 封装 测试 基地 启动 于 2001 年 ， 是 一 家 宇宙 微 电 子 封装 测试 基地 启动 于 2001 年 ， 是 一 家 
专业 从 事 半 导 体 功率 器 件 和 其 他 电子 产品 封装 的 专业 从 事 半 导体 功率 器 件 和 其 他 电子 产品 封装 的 
优秀 供应 商 。 工 厂 具备 从 美国 、 德国、 日 本 等 国 优秀 供应 商 。 工 厂 具 备 从 美国 、 德国、 日 本 等 国 
际 和 地 区 原装 进口 的 世界 一 流 的 生产 设备 和 测试 全 村 站 的 和 村 家 四 和 


。 基地 一 。 基地 一 
。 基地 二 。 基地 二 
。 基地 三 。 基地 三 


切换 图 标 切换 图 标 





图 13-16 题 3 图 


4. 使 用 jQuery UI 菜单 插件 制作 如 图 13-17 所 示 的 二 级 菜单 。 本 题 需要 在 Chrome 
浏览 器 中 才能 看 到 该 效果 。 


和 ley//Dywebych13/ 习 是 /vt13-4.html* 


filey//DYweb/ch13/ 习 区 /xt13-4html# 





图 13-17 题 4 图 
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本 章 主要 运用 前 面 章节 讲解 的 各 种 网 页 制作 技术 介绍 网 站 的 开发 流程 ,从 而 进一步 
巩固 网 页 设计 与 制作 的 基本 知识 。 


从 1 网 站 的 开发 流程 和 组 织 结构 


在 讲解 具体 页 面 的 制作 之 前 ,首先 简单 介绍 一 下 网 站 的 开发 流程 和 组 织 结构 。 


14.1.1 


网 站 的 开发 流程 


典型 的 网 站 开发 流程 包括 以 下 几 个 阶段 。 
(1) 规划 网 站 : 包括 确立 站 点 的 策略 或 目标 、 确 定 所 面向 的 用 户 以 及 站 点 的 数据 


需求 


(2) 网 站 制作 : 包括 设置 网 站 的 开发 环境 、 规 划 页 面 设计 和 布局 .创建 内 容 资 源 等 。 
(3) 网 站 测试 : 测试 页 面 的 链接 及 网 站 的 兼容 性 。 

(4) 发 布 网 站 : 将 站 点 发 布 到 服务 器 上 。 

具体 介绍 如 下 。 


1. 规划 网 站 

建设 网 站 首先 要 进行 规划 ,规划 的 范围 包括 确定 网 站 的 服务 职能 、 服 务 对 象 . 所 要 表 
达 的 内 容 等 ,还 要 考虑 站 点 文件 的 结构 等 。 在 着 手 开 发 站 点 之 前 认真 进行 规划 ,能 够 在 以 
后 节省 大 量 的 时 间 。 

(1) 确定 建站 的 目的 。 建 立 网 站 的 目的 要 么 是 宣传 推广 ,要 么 是 增加 利润 。 显 然 , 创 





电子 网 站 了 


建 宇宙 电子 网 站 的 目的 是 宣传 推广 企业 ,提高 企业 的 知名 度 , 增 加 企业 之 间 的 合作 ,宇宙 


E 是 在 这 样 的 业务 背景 下 建立 的 。 





(2) 确定 网 站 的 内 容 。 内 容 决 定 一 切 , 内 容 价 值 决 定 了 浏览 者 是 否 有 兴趣 继续 关注 
网 站 。 宇 宙 电 子 网 站 的 主要 功能 模块 包括 公司 简介 、 产 品 展示 、 新 闻 中 心 、 人 才 招 聘 、 联 系 


我 们 等 。 


(3) 使 用 合理 的 文件 夹 保 存 文档 。 若 要 有 效 地 规划 和 组 织 站 点 ,除了 规划 站 点 的 
内 容 外 ,就 是 规划 站 点 的 基本 结构 和 文件 的 位 置 ,可 以 使 用 文件 夹 来 合理 构建 文档 结 


Wb 前 端 开发 实例 教程 一 HL 5+ JevaScript + jQuery 
构 。 首 先 为 站 点 建立 一 个 根 文件 夹 ( 根 目 录 ) ,在 其 中 创建 多 个 子 文件 夹 , 然 后 将 文档 
分 门 别 类 存储 到 相应 的 文件 夹 下 。 设 计 合 理 的 站 点 结构 ,能 够 提高 工作 效率 ,方便 对 
站 点 的 管理 。 

(4) 使 用 合理 的 文件 名 称 。 当 网 站 的 规模 变 得 很 大 时 ,使 用 合理 的 文件 名 就 显得 十 
分 必要 ,文件 名 应 该 容易 理解 且 便 于 记忆 ,让 人 看 文件 名 就 能 知道 网 页 表述 的 内 容 。 由 于 
Web 服务 器 使 用 的 是 英文 操作 系统 ,不 能 对 中 文 文件 名 提供 很 好 的 支持 ,中 文 文件 名 可 
能 导致 浏览 错误 或 访问 失败 。 如 果实 在 对 英文 不 熟悉 ,可 以 采用 汉语 拼音 作为 文件 名 称 
来 使 用 。 


2. 网 站 制作 


完整 的 网 站 制作 包括 以 下 两 个 过 程 。 

(1) 前 台 页 面 制作 。 当 网 页 设计 人 员 拿 到 美工 效果 图 以 后 ,需要 综合 使 用 HTML、 
CSS、JavaScript、jQuery 等 Web 前 端 开发 技术 ,将 效果 图 转换 为 . html 网 页 ,其 中 包括 图 
片 收 集 、 页 面 布局 规划 等 工作 。 

(2) 后 台 程 序 开 发 。 后 台 程序 开发 包括 网 站 数据 库 设计 、 网 站 和 数据 库 的 连接 、 动 态 
网 页 编程 等 。 本 书 主要 讲解 前 台 页 面 的 制作 ,后 台 程 序 开发 读者 可 以 在 动态 网 站 设计 的 
课程 中 学 习 。 


3. 网 站 测试 


网 站 测试 与 传统 的 软件 测试 不 同 , 它 不 但 需要 检查 是 否 按照 设计 的 要 求 运 行 ,而 且 还 
要 测试 系统 在 不 同 用 户 端 的 显示 是 否 合适 ,最 重要 的 是 从 最 终 用 户 的 角度 进行 安全 性 和 
可 用 性 测试 。 在 把 站 点 上 传 到 服务 器 之 前 ,要 先 在 本 地 对 其 测试 。 实 际 上 ,在 站 点 建设 过 
程 中 ,最 好 经 常 对 站 点 进行 测试 并 解决 出 现 的 问题 ,这 样 可 以 尽早 发 现 问题 并 避免 重 犯 
错误 。 

测试 网 页 主要 从 以 下 3 个 方面 着 手 。 

*。 页 面 的 效果 是 否 美观 。 

。 页 面 中 的 链接 是 否 正确 。 

"页 面 的 浏览 器 兼容 性 是 否 良 好 。 


4. 发 布 网 站 


当 完 成 了 网 站 的 设计 ,调试 ,测试 和 网 页 制作 等 工作 后 ,需要 把 设计 好 的 站 点 上 传 到 
服务 器 来 完成 整个 网 站 的 发 布 。 可 以 使 用 网 站 发 布 工具 将 文件 上 传 到 远程 Web 服务 器 
以 发 布 该 站 点 ,以 及 同步 本 地 和 远 端 站 点 上 的 文件 。 





14.1.2 创建 站 点 目录 


在 制作 各 个 页 面前 ,用 户 需 要 确定 整个 网 站 的 目录 结构 ,包括 创建 站 点 根 目录 和 根 目 
录 下 的 通用 目录 。 
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1. 创建 站 点 根 目 录 


本 书 所 有 章节 的 案例 均 建立 在 D:\web 下 的 各 个 章节 目录 中 。 因 此 ,本 章 讲解 的 综 
合 案例 建立 在 D:\webNchl4 目录 中 ,该 目录 作为 站 点 根 目录 。 


2. 根 目录 下 的 通用 目录 


对 于 中 小 型 网 站 ,一 般 会 创建 如 下 通用 的 目录 结构 。 
。css 目 录 : 存放 CSS 样式 文件 ,实现 内 容 和 样 




















[区 引 
式 的 分 离 。 God， -9 
。 images 目录 : 存放 网 站 的 所 有 图 片 。 文件 (站 编 包 (E) 下 看 M 工具 帮助 (H) 
。 js 目录 : 存放 jQuery 和 JavaScript 脚本 文件 。 RR Ema a 
。 plugins 目录 : 存放 jQuery 插件 文件 。 Sy 
在 D:\webNchl4 目录 中 依次 建立 上 述 目录 ,整个 dt i 
网 站 的 目录 结构 如 图 14-1 所 示 。 Ts 


对 于 网 站 下 的 各 网 页 文件 ,例如 ,index. html 等 一 
般 存 放 在 网 站 根 目录 下 。 需 要 注意 的 是 ,网 站 的 目录 、 
网 页 文件 名 及 网 页 素材 文件 名 一 般 都 为 小 写 , 并 采用 
代表 一 定 含义 的 英文 命名 。 





图 14-1 网 站 目录 结构 


14.1.3 网 站 页 面 的 组 成 


宇宙 电子 网 站 的 主要 组 成 页 面 如 下 。 

首页 (index. html) : 显示 网 站 的 Logo、 导 航 菜单 .广告 .新闻 动态 、 产 品 推 介 和 版 权 声 
明 等 信息 。 

关于 公司 页 (about. html) : 显示 公司 经 营 模 式 ,管理 体系 、 组 织 架 构 的 页 面 。 

产品 展示 页 (product. html) : 显示 产品 分 类 的 页 面 。 

新 闻 中 心 页 (news. html) : 显示 公司 新 闻 和 信息 公示 的 页 面 。 

人 才 招 聘 页 (join. html) : 显示 公司 招聘 信息 和 福利 待遇 的 页 面 。 

联系 我 们 页 (contact. html) : 显示 公司 联系 方式 和 在 线 留言 的 页 面 。 


人 2 网 站 技术 分 析 


制作 宇宙 电子 网 站 的 使 用 的 主要 技术 如 下 。 


1. HTML sS 


HTML 5 是 网 页 结构 语言 ,负责 组 织 网 页 结构 ,站 点 中 的 页 面 都 需要 使 用 网 页 结构 
语言 建立 起 网 页 的 内 容 架 构 。 
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在 制作 本 网 站 中 使 用 的 HTML 5 的 主要 技术 如 下 。 
。 搭建 页 面 内 容 架 构 。 

。 Div 布局 页 面 内 容 。 

。 使 用 文档 结构 元 素 定义 页 面 内 容 。 

。 使 用 列表 和 链接 制作 导航 菜单 。 

。 使 用 表单 技术 制作 搜索 框 。 

。 使 用 表格 技术 格式 化 输出 页 面 内 容 。 

。 使 用 HTML 5 获取 地 理 位 置 及 百度 地 图 。 


2. CSS3 


CSS 3 是 网 页 表现 语言 ,负责 设计 页 面 外 观 , 统 一 网 站 风格 ,实现 表现 和 结构 相 分 离 。 
本 书 讲解 的 重点 是 HTML 5、JavaScript 和 jQuery 的 应 用 ,因此 这 部 分 内 容 不 再 详细 
介绍 。 





3. JavaScript 和 jQuery 


JavaScript 和 jQuery 是 网 页 行为 语言 ,实现 页 面 交 互 与 网 页 特效 。 
在 制作 本 网 站 中 使 用 的 JavaScript 和 jQuery 的 主要 技术 如 下 。 

。 使 用 图 片 轮 播 特效 制作 首页 的 广告 条 。 

。 使 用 滚动 显示 插件 实现 新 闻 内 容 滚 动 条 显示 。 

。 使 用 滑 块 插件 实现 我 们 的 产品 水 平 滚动 显示 。 

。 使 用 自动 完成 插件 实现 搜索 框 智能 提示 。 
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网 站 首页 包括 网 站 的 Logo .导航 菜 单 .广告 .新 闻 动 态 .产品 推介 和 版 权 声明 等 信息 ， 
效果 如 图 14-2 所 示 ,布局 示意 图 如 图 14-3 所 示 。 
在 实现 了 首页 的 整体 布局 后 , 接 下 来 就 要 完成 首页 的 制作 。 制 作 过 程 如 下 。 


1. 页 面 结构 代码 


首先 列 出 页 面 的 结构 代码 ,让 读者 对 页 面 的 整体 结构 有 一 个 全 面 的 认识 ,然后 在 此 基 
础 上 重点 讲解 页 面 交互 与 网 页 特效 的 实现 方法 。 首 页 (index. html) 的 结构 代码 如 下 : 








<html> 
<head> 
<meta charset= "gb2312" /> 
<title> 宇 宙 电 子 < /title> 
< link rel= "stylesheet" type= "text/css" href= "css/reset.css"/> 
< script type= "text/javascript" src="js/jquery- 1.8.3.min.js"> < /script> 
< script type= "text/javascript" src= "js/js z.js">< /script> 
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UniDigital 字 宙 电子 


我 们 始终 
将 产品 质量 放 在 第 一 位 














owl-demo 


i_about 








wrap 
a 





bg 
































图 14-3 首页 的 布局 示意 图 
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< Script type= "text/javascript" src= "js/banner.js"> < /script> 
< link rel= "stylesheet" type= "text/css" href= "css/thems.css"> 
< script src= "plugins/scrool/jquery/jqvery -mousewheel .min.js">< /script> 
< script src= "plugins/scrool/jquery/jqvery.ba- resize.min.js">< /script> 
< script src= "plugins/scrool/js/scrollbar.min.js"> < /script> 
< script src= "plugins/scrool/js/buttons.js">< /script> 
< link rel= "stylesheet" type= "text/css" href= "css/responsive.css"> 
< script language= "javascript"> 
$ (Enction() { 
$ ("#0wl1— demo') .owlCarousel ({ 
items: 1, 
navigation: true, 
navigationText: [" 上 一 个 "" 下 一 个 中 ， 
autoPlay: true, 
StopOnHover: true 
]) .hover (function (){ 
$('.owl- buttons') .show()7 
}, function() { 
$('.owl- buttons') .hide (); 
Ds; 
Ds; 
< /script> 
< /head> 
< body> 
< 上 -网 站 主页 链接 和 联系 电话 定义 开始 --> 
<div class= "h bg"> 
<div class="h top"> 
<a href= "4"> www.unidigital .cam /a> 
<a href= "tel: 400- 820- 1111" class= "tel"> 400- 820- 1111< /a> 
</div> 
< /div> 
< 二 -网 站 主页 链接 和 联系 电话 定义 结束 --> 
< 上 -网 站 标志 和 导航 菜单 定义 开始 --> 
< div class= "head clearfix"> 
<div class= "logo"> 
< img src= "images/l0go.jpg"/> < /div> 
<div class= "nav_m"> 
<div class= "mn_ioon"> 导 航 栏 < /div> 
<ul class= "nav clearfix"> 
<]i class= "now"><a hre 伍 "index.html"> 网 站 首页 < /a>< /li> 
<1li><a hre 伍 "about.html"> 关 于 公司 < /a>< /li> 
<1i><a hre 伍 "product.html"> 产 品 展示 </a>< /li> 
<1i><a hre 仁 "news.html"> 新 闻 中 心 </a></1i> 
<1i><a hre 全 "join.html"> 人才 招 聘 </a>< /li> 
<1i><a hre 伍 "contact.htbml"> 联 系 我 们 < /a>< /li> 
</al> 
</div 
</div> 


< 上 -网 站 标志 和 导航 菜单 定义 结束 --> 
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< 上 -图 片 轮 播 特 效 广告 条 定义 开始 --> 
< div id "banner" class= "banner"> 
<div id "owl- demo" class= "owl- carousel™> 
<a class= "item" target= " blank" href= "" style= "background- image: url 
(images/banner.jpg) "> 
< img src= "images/banner.jpg" alt= "> 
</a> 
<a class= "item" target=" blank" href= "" style= "background- image: url 
(images/banner.jpg) "> 
< jmg src= "images/banner.jpg" alt= "> 
</a> 
<a class= "item" target=" blank" href= "" style= "background- image: url 
(images/banner.jpg) "> 
< img src= "images/banner.jpg" alt=""> 
</a> 
</div> 
</div> 
< 上 -图 片 轮 播 特效 广告 条 定义 结束 --> 
< 上 -公司 简介 和 新 闻 动 态 区 域 定义 开始 --> 
<div class= "wrap wrap a clearfix"> 
<div class="i about"> 
<hl> <a hre 全 "> <em> UniDigital< /en> 宇 宙 电 子 有 限 公 司 < /a>< /hl> 
<dl class= "clearfix"> 
<dt><ahre 全 ">< img src= "images/picl.jpg" alt=""/>< /a>< /dt> 


<d 中 
< 户 宇 宙 微 电子 封装 测试 基地 启动 于 2001 年 …… 此 处 省 略 文字 )< /p> 
< 本 工厂 严格 实行 TSo 9001、ISO 14001 和 TS 16949…… (此 处 省 略 文字 )< /p> 
< 有 宇宙 电子 采用 标准 化 和 定制 化 服务 相 结合 …… 此 处 省 略 文字 )< /E> 

< /ad> 

</dl> 


</div> 
<div class= "i_news"> 
<div class= "top"> 
< em snbsp;< /ey 新闻 动态 
<ahref- "> 更 多 新 闻 < /a> 
</div> 
<div class="i m"> 
<div id= "scrollbarl"> 
<div class= "scrollbar"> 
<div class= "content"> 
<uUl> 
<1i> 
<div class= "time"> 2017- 10- 13 /div> 
<div class= "title"> 


<ahre 人 "> 宇宙 电子 有 限 公司 获得 开封 开发 区 百 强 企业 荣誉 称 


> 
</div> 

</i> 

<1i> 


号 </ 
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<div class= "time"> 2017- 10- 13< /div> 
<div class= "titler> 


<a href="> 宇 宙 电 子 将 作为 知名 …… 此 处 省 略 文字 )< /a> 
</div> 
</li> 
二 此 处 省 略 6 条 类 似 的 新 闻 定义 ) 
</al> 
</div> 
</div> 
< /div> 
< /div> 
</div> 
< /div> 


< 上 -公司 简介 和 新 闻 动 态 区 域 定义 结束 --> 
< 上 -我 们 的 产品 定义 开始 --> 
<div class= "bg a"> 
<div class= "wrap wrap b"> 
<div class="i_name"> 我 们 的 产品 < /div> 
<div class="i m"> 
< div class= "box mainPhoto"> 
< span class= "goleft nextPage"> 
<a href= "javascript: void(0)"> < img src= "images/prev .ng" />< /o> 
< /span> 
<div class= "go slidegrid"> 
<u class= "slideitems"> 
<1i> 
<ahref=""> 
<div class= "title"> TC< /div> 
< img src= "images/pic2.jpg" alt= ""/> 
<div class="des"> 所 有 半导体 产品 的 基本 部 件 一 一 二 极 管 , 对 
于 宇宙 电子 来 说 ,是 其 始终 保持 世界 项 级 市 场 占有 率 的 产品 。 
< /div> 
</a> 
</li> 
…… 此 处 省 略 5 条 类 似 的 产品 定义 ) 
</al> 
</div> 
< span class= "goright prevPage"> 
<a href= "javascript: void(0)"> < jnmg src= "images/next .mg" />< /o> 
< /span> 
< /div> 
< Script> 
$ (function() { // 使 用 jQuery 实现 产品 滑动 显示 的 特效 
$ (' .minPhoto .sligdegrid') .scrollable ({ 
size: 4,circular: true,next: ' .nextPage',prev: ' .prevPage'}). 
autoscrol]l (); 
Ds; 
< /script> 
<div class= "i mre"><a href 全 "> 更 多 产品 < /a>< /div> 


366 


第 tl4 章 ”综合 案例 一 宇宙 电子 网 站 





< /div> 
</div> 
</div> 
< 上 -我 们 的 产品 定义 结束 --> 
< 上 -底部 版 权 区 域 定 义 开 始 --> 
<div class= "wrap foot"> 
< 攻 <ahre 全 嘎 必 企业 社会 责任 </a> | <ahre 会 
哗 咱 环保 活动 </a> | <ahre 全 只 改 人 才 招聘 </a> | <ahre 伍 嘎 吃 联系 我 们 
</a> | <ahre 全 只 性 友情 链接 </a>< /p> 
< 访 版 权 所 有 : 宇宙 电子 有 限 公 司 ”copyright gcopy; 2017 thiDigital 0., Itd.< /E> 
</div> 
< 上 二 -底部 版 权 区 域 定 义 结束 --> 
< /body> 
< /htm> 


2. 页 面 交互 与 网 页 特效 的 实现 


1) 使 用 图 片 轮 播 特效 制作 广告 条 

制作 过 程 如 下 。 

(1) 在 网 页 的 二 head 二 区 域 引入 jQuery 库 和 特效 插件 (首页 所 有 特效 插件 )。 代 码 
如 下 : 





< script type= "text/javascript" src= "js/jquery- 1.8.3.min.js"> < /script> 
< script type= "text/javascript" src= "js/js z.js">< /script> 

< script type= "text/javascript" src= "js/banner.js"> < /script> 

< script src= "plugins/scrool/jquery/jquery.mousewheel .min.js"> < /script> 
< script src= "plugins/scrool/jquery/jquery.ba- resize.min.js"> < /script> 
< script src= "plugins/scrool/js/scrollbar.min.js"> < /script> 

< script src= "plugins/scrool/js/buttons.js"> < /script> 


(2) 讲解 实现 图 片 轮 播 特效 所 使 用 的 方法 。 实 现 图 片 轮 播 特效 ,其 关键 是 应 用 
jQuery 框架 技术 ,该 方法 的 定义 位 于 js/banner. js 文件 中 。 由 于 该 文件 内 容 较 长 ,这 里 只 
截取 了 生成 图 片 轮 播 特效 对 象 及 设置 播放 参数 的 关键 代码 。 代 码 如 下 : 


$.fn.owlCarousel= finction (cptions) { 
retum this.each(function () { 
if ($ (this) .data("owl- init")===true) { 
returmn false; 
} 
$ (this) .Gata("owl- init", true); 
Var Carousel= Cbject .create (Carousel); 
Carousel .init (options, this); 


$.data(this, "owlCarousel", carousel); // 生 成 图 片 轮 播 对 象 
D; 
了 
$ .fn.onlCarousel .cptions= { // 设 置 图 片 轮 播 对 象 的 参数 
items : 5, // 人 允许 最 多 5 幅 图 像 轮 播 


itemsCustcm : false, 
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itemsDesktcp : [1199, 1], 
itemsDesktopSmall : [979, 1], 
itemsTablet : [768, 1], 
itemsTabletSmall : false, 
itemsMobile : [479, 1], 
singlelItem : false, 


slidespeed : 200, // 手 动 切 换 图 片 的 速度 
paginationSpeed : 800, // 自 动 分 页 切换 图 片 的 速度 
rewindspeed : 1000, // 回 放 切 换 图 片 的 速度 


rewindNav : true, // 允 许 回放 
scrollPerPage : false, 

pagination : true, // 人 允许 分 页 
paginationNunbers : false, // 不 显示 分 页 数字 
responsive : true, /1 响应 单 击 事件 


autcHeight : false, /| 播放 器 高 度 自 适应 


mouseDrag : true, // 允 许 鼠 标 拖 动 


addclassActive : false, 
transitionStyle : false, 
beforeUpdate : false, 
afterUpdate : false, 
beforeInit : false, 
afterInit : false, 
beforeMove : false, 
afterMve : false, 
afterAction : false, 
startDragging : false, 
afterLazyLoad: false 
a 


2) 制作 新 闻 内 容 滚 动 条 显示 

制作 过 程 如 下 。 

(1) 在 网 页 的 二 head 二 区 域 引 入 jQuery 库 和 特效 插件 ,前 面 已 经 实现 ,这 里 不 青 
效 述 。 
368 


第 4 章 ”综合 案例 一 宇宙 电子 网 站 
(2) 讲解 实现 新 闻 内 容 滚动 条 显示 的 方法 。 该 方法 的 定义 位 于 pluginsNscrool\ 
jquery\jquery. mousewheel. min. js 文件 中 。 关 键 代 码 如 下 : 





(function (c){ 
Var a ["DOMMPusesScroll", "mousewheel"]; // 定 义 鼠 标 滚 轮 变量 
c.event .special .mousewheel= {setup: fancticn () // 初 始 化 
if(this.addEventListener) { 
for (var d=a.length;d;){ 
this.addeventListener(a[- -可 ,byfalse) // 添 加 鼠标 滚轮 事件 监听 
} 
Jelse{ 
this.onmpusewhee]l=b 
jteardown: function(){ // 本 次 滚动 事件 完成 之 后 的 善后 处 理 
让 (this.removeEventListener){ // 移 除 事件 监听 
for (var d=a.length;d;) { 
this.removeEventListener(a[- -dj,byfalse) // 逐 一 移 除 


Jelse{ // 如 果 所 有 事件 监听 全 部 移 除 
this.onmousewheel=null // 释 放 对 象 占用 的 资源 
} 
} 
ia 
c.fn.extend({ 


mousewheel: function(d) { 
retum d?this .bind ("mousewheel",d) : this.trigger ("mousewheel") 
// 模 拟 用 户 操作 触发 事件 
}，unmpusewhee1l: function(d) { 
retumn this.unbind (mousewheel"vd) // 移 除 事 件 绑 定 
} 
Ds; 
function b(f){ 
var dG [] .slice.call (arguments,1),g=0,e= true; 
个 c.event.fix(f| |window.event); 
£.type= "mousewheel"; /定义 事件 类 型 是 鼠标 滚轮 事件 
if(f.wheelDelta){ 
gf.wheelDelta/120 
} 
if(f.detail){ 
og-f.detail/3 
} 
d.unshift (f,g); 
Teturn c.event..handle.apply (this,d) // 允 许 鼠 标 滚轮 事件 
} 
}) Goery); 


3) 制作 我 们 的 产品 滚动 显示 

制作 过 程 如 下 。 

(1) 在 网 页 的 王 head 区域 引入 jQuery 库 和 JavaScript 脚本 文件 ,前面 已 经 实现 ,这 
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里 不 再 著述 。 
(2) 讲解 实现 我 们 的 产品 水 平 滚动 显示 的 方法 。 该 方法 的 定义 位 于 index. html 文 
件 中 。 关 键 代 码 如 下 : 
< Script> 
$ (function() { 
$ (' .mainFhoto .slidegrid') .scrollable ({ // 允 许 图 片 滚动 容器 slidqegriq 滚 动 
size: 4,circular: true,next: ' .nextPage',prev: ' .prevPage' 
// 同 时 显示 4 幅 图 片 且 循环 滚动 
]) .autoscroll (); // 页 面 加 载 后 自动 开始 滚动 图 片 
Ds; 
< /script> 
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首页 完成 以 后 ,其 他 页 面 在 制作 时 就 有 章 可 循 ,相同 的 样式 和 结构 可 以 复 用 ,所 以 在 
实现 其 他 页 面 的 实际 工作 量 会 大 大 小 于 首页 制作 。 

关于 公司 页 用 于 显示 公司 经 营 模式 、 管 理 体系 .组 织 架构 ,页 面 效 果 如 图 14-4 所 示 ， 
布局 示意 图 如 图 14-5 所 示 。 


UniDigital 宇宙 电子 














图 14-4 关于 公司 页 的 效果 


关于 公司 页 的 布局 与 首页 非常 相似 ,例如 网 站 的 Logo、 导 航 菜单 .版 权 区 域 等 ,读者 
可 以 参考 素材 提供 的 代码 ,这 里 不 青 袭 述 其 实现 过 程 ,而 是 重点 讲解 如 何 实 现 搜 索 框 的 知 
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图 14-5 布局 示意 图 


能 提示 功能 。 

制作 过 程 如 下 。 

(1) 准备 工作 。 由 于 搜索 框 的 智能 提示 功能 要 使 用 jQuery UI 的 自动 完成 插件 , 因 
此 需要 将 jQuery UI 插件 的 文件 夹 复制 到 当前 站 点 的 js 文件 夹 中 。 

(2) 编写 程序 实现 搜索 框 的 智能 提示 功能 ,关键 代码 如 下 : 


<htm> 
<head> 
<meta charset= "gb2312" /> 
<title> 关 于 公司 < /title> 
< link rel= "stylesheet" type= "text/css" href= "css/reset.css"/> 
< link rel= "stylesheet" type= "text/css" href= "css/thems.css"> 
< link rel= "stylesheet" type= "text/css" href= "css/responsive.css"> 
< script type= "text/javascript" src= "js/jquery- 1.8.3.min.js"> < /script> 
< script type= "text/javascript" src="js/js z.js">< /script> 
< link rel= "stylesheet" href= "js/joquery- ui- 1.12.1.0ustam/jqyery— ui.css" /> 
< script src= "js/jquery- ui- 1.12.1.custaryVexternal/jquery/jquery.js"> 
< /script> 
< script src= "js/jquery- ui- 1.12.1.custom/jqvery— ui.js"> < /script> 
<style> 
-Ui- autoccomplete { 
max- height: 100px; // 药 单 最 大 高 度 100px 超 出 高 度 时 出 现 垂直 滚动 条 
averflow- y: auto; /垂直 滚 动 条 自动 适应 
overflow- x: hiddeny // 防 止 水 平 滚动 条 
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# search div{ 
text- align: right; 
} 
#search btnf 
width: 40px; 
border: 0; 
height: 30px; 
background: url (images/icon3.png) no- repeat center oenter; 
// 按 钮 的 背景 是 放大 镜 图 片 
} 
</style> 
<script> 
$ (function() { 
var datas= [ // 定 义 查询 词 条 
'" 守 汕 电 子 " 
哼 宙 科 技 ", 
哼 宙 会 展 " 
"宇宙 画廊 " 
"宇宙 社区 "， 
"宇宙 大 学 "， 
"宇宙 健身 "， 
" 哇 宙 车 展 " 
" 哇 宙 学 堂 "， 
"宇宙 环保 " 
]; 
$ ("# tags") .autoccmplete({ // 调 用 自动 完成 方法 
source: datas // 兰 定 词 条 到 搜索 文本 框 
D; 
D; 
< /script> 
< /head> 
<body> 
…( 省 略 的 页 面 其 他 代码 ,下 面 是 搜索 文本 框 所 在 的 dv 代码 ) 
<div class= "ui- widget" id= "search div"> 
< input idF "tags" name= "" type= "text" value="™"/> 
< input type= "submit" id "search btn" value=""> 
</div> 
… 人 省 略 的 页 面 其 他 代码 ) 
< /body> 
</htm> 


在 浏览 器 中 打开 关于 公司 页 about. html, 输 入 搜索 关键 词 “ 宇 宙 ”, 可 以 看 到 智能 提 
示 的 效果 ,如 图 14-6 所 示 。 

需要 注意 的 是 ,读者 在 制作 本 页 面 时 一 定 要 记 住 在 页 面 志 head 二 区域 添 加 引用 
jQuery UI 插件 的 代码 。 
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联系 我 们 页 用 于 显示 公 
图 如 图 14-8 所 示 。 


| 








图 14-6 搜索 框 的 智能 提示 的 效果 
人 5 制作 联系 我 们 页 


\ 司 联系 方式 和 在 线 留言 


UniDigital 宇宙 电子 





BEA 


上 了 系 我 们 





,页 面 效果 如 图 14-7 所 示 ， 


布局 示意 








图 14-7 联系 我 们 页 的 显示 效果 
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图 14-8 页面 的 布局 示意 图 


联系 我 们 页 的 布局 与 关于 公司 页 非常 相似 ,例如 网 站 的 Logo、 导 航 菜单 ,版权 区 域 等 ， 
这 里 不 再 闭 述 其 实现 过 程 ,而 是 重点 讲解 如 何 使 用 HTML 5 获取 地 理 位 置 及 百度 地 图 。 

制作 过 程 如 下 。 

(1) 准备 工作 。 使 用 HTML 5 获取 地 理 位 置 及 百度 地 图 需要 互联 网 在 线 支持 ,在 网 
页 的 二 head 二 区 域 需要 添加 获取 地 理 位 置 及 百度 地 图 的 JavaScript 脚本 引用 代码 。 这 两 
个 脚本 文件 来 自 互 联网 ,因此 ,用 户 网 站 中 不 需要 相关 的 .js 文件 ,只 需要 正确 引用 网 络 资 
源 的 位 置 即 可 。 代 码 如 下 : 





< script type= "text/javascript" src= "htbp://api.map.baidu.coapi? 王 1.3"> 
< /script> 

< script type= "text/javascript" src= "http://developer.baidu.coam/map/jsdemo/ 
demp/convertor.js"> < /script> 


(2) 编写 程序 实现 HTML 5 获取 地 理 位 置 及 百度 地 图 的 功能 。 代 码 如 下 : 


<html> 
<head> 
<meta charset= "gb2312" /> 
<title> 联 系 我 们 < /title> 
< link rel= "stylesheet" type= "text/css" href= "css/reset.css"/> 
< script type= "text/javascript" src= "js/jquery- 1.8.3.min.js"> < /script> 
< script type= "text/javascript" src= "js/js z.js">< /script> 
< link rel= "stylesheet" type= "text/css" href= "css/thems.css"> 
< link rel= "stylesheet" type= "text/css" href= "css/responsive-css"> 
< script type= "text/javascript" src= "http://api .map.baidu.com/api2—= 
1.3">< /script> 
< script type= "text/javascript" src= "http://developer.baidu.com/map/ 
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jsdemo/demo/corvertor.js"> < /script> 

< script type= "text/javascript"> 

Var map; 

Var gpsPoint; 

Var baidupoint; 

Var gpshodress; 

Var baiduAddress; 

finction getLocation () { 


// 根 据 下 获取 城市 

Var myCity= new BMap.LocalCity(); 

myCity.get (getCityByIP); 

// 获 取 GPS 坐标 

if (navigator.geolocation) { 
TaeVigator.geolocatin.getOrrentPositian (showMep, handleError, { 

enableHighAocuracy: true maximmge: 1000 }); 
} else { 


alert ("您 的 浏览 器 不 支持 使 用 HML 5 来 获取 地 理 位 置 服务 "); 


} 


function showMap (value) { 


} 


Var longitude= value.coords.longitudey 

var latitude= value.coords.latitude; 

map= new PMap.Map ("map") ; 

//alert ("坐标 经 度 为 : "+ latituder w 纬度 为 : "+ longitude); 
PsPoint= new BMap.Point (longitude, latitude); 1/ 创建 点 坐标 
map.centerAand7Zocom (gpsPoint, 15); 

// 根 据 坐 标 逆 解 析 地 址 

Var geoc= new BMap.Geocoder (); 

geoc.getLocation (gpsPoint, getCityByCoordinate); 

BMap.Convertor .translate (gpsPoint, 0, translateCallback); 


translateCallback= fanction (point) { 


} 


baiduPoint= point; 
Var geoc= new EMap.Geocoder (); 
geoc.getLocaticn (baiduPoint, getCityByBaiduCoordinate); 


functicn getCityByCoordinate (rs) { 


} 


gpsAddress= rs.addressCarponents; 
var address= "GPS 标注 : "+ gpshddress .provinoet+ " "+ gpsAddress. 
City+ " "+ gpsAddress .districtt+ ","+ gpsAddress.street+ ","+ 


gpsmqdress.streetNoniber7 
Var marker= new BMap.Marker (gpsPoint); ”// 创 建 标注 
map.addioverlay (marker) ; // 将 标注 添加 到 地 图 中 
var labelgps= new EMap.Label (address, { offset: new EMap.Size (20， 
-10) Ds; 
marker-setLabel (labelgps); // 添 加 ces 标 注 


finction getCityByBaiduCoordinate (rs) { 


baiduacress= rs.addressCanponents; 


var adtress= "百度 标注 : "+ baiduacdress.provinoet ","+ baiduAddress. 


City+ ","+ baiduAGdress.district+ ","+ baiduAddress.strest+ ","+ 
baidunodress.streetNunber; 
Var marker= new BMap.Marker (baiduPoint); ”// 创 建 标注 
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map.addoverlay (marker); // 将 标注 添加 到 地 图 中 
var labelbaidur new Bep.Iabel (address, { offset: new BMap.Size (20, 
-10) ); 
// 添 加 百度 标注 


marker.setLabel (labelbaidu); 


// 根 据 下 获取 城市 
finction getCityByIP(rs) { 
Var cityName= rs.name; 
alert(" 恨 据 人 定位 您 所 在 的 城市 为 : "+ cityName); 
} 
function handleError (value) { 
Switch (value.code) { 
Case 1: 
alert(" 位 置 服务 被 拒绝 
break; 
Case 2: 
alert(" 暂 时 获取 不 到 位 置信 息 m; 
break; 
Case 3 
alert ("获取 信息 超时 "); 
break; 
Case 4: 
alert ("未 知 错误 "); 
break; 
1 
} 
function init() { 
getlocation(); 
} 
window.onload= init; 
< /script> 
< /heac> 
<body> 
…( 省 略 的 页 面 其 他 代码 ) 
<div class= "sod m contact"> 
<div class="ct m"> 
<dl class= "clearfix"> 
<ap 
<p> QQ: < span> 100588023< /span> < /p> 
< 户 企 业 微 信号 : < span> 6666699999< /span> < /p> 
< 户 客 服 邮 箱 : < span> 1005880238 qqg.come /span> < /p> 
<p> 客 服 电话 : < span> 400- 820- 1111< /span> < /p> 
</dd> 
</dl> 
</div> 
</div> 
<hr/> 
<h3> 公 司 地 址 : < /h3> 
< div id "map" style= "width: 850px;height: 800px;margin: 20px;"> 
</div> 
…-( 省 略 的 页 面 其 他 代码 ) 
< /body> 
< /htm> 
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至 此 ,宇宙 电子 网 站 的 主要 页 面 和 关键 技术 讲解 完毕 。 读 者 可 以 在 此 基础 上 制作 网 
站 的 其 余 3 个 页 面 。 








U6 网 站 的 整合 


在 前 面 章节 中 讲解 了 许多 有 关 宇 宙 电 子 网 站 的 示例 页 面 , 都 是 按照 某 种 技术 进行 页 
面 制作 的 ,并 未 将 相关 的 页 面 整合 在 统一 的 站 点 下 。 读 者 完成 本 章 网 站 页 面 之 后 ,可 以 将 
这 些 相关 的 页 面 整合 在 一 起 形成 一 个 完整 的 站 点 。 

假设 想 建立 一 个 学 习 交 流 的 栏目 ,由 于 综合 案例 网 站 的 站 点 根 目 录 是 D:\web\ 
ch14, 因 此 可 以 按照 栏目 的 含义 在 D:\web\ch14 下 建立 栏目 的 文件 夹 study, 然 后 将 前 面 
章节 中 做 好 的 相关 页 面 及 素材 一 起 复制 到 文件 夹 study 中 。 

最 后 还 要 说 明 的 是 , 当 这 些 栏目 整合 完成 之 后 ,记得 正确 地 设置 各 级 页 面 之 间 的 链 
接 , 使 之 有 效 地 完成 各 个 页 面 之 间 的 跳 转 。 


习 题 


1. 制作 宇宙 电子 网 站 的 新 闻 中 心 页 (news. html) ,如 图 14-9 所 示 。 





UniDigital 字 宙 电子 mr ee ee 
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2. 制作 宇宙 电子 网 站 的 人 才 招 聘 页 (join. html) ,如 图 14-10 所 示 。 





UniDigital 宇宙 电子 mae a ras eo re rer 














图 14-10 题 2 图 
3. 制作 宇宙 电子 网 站 的 产品 展示 页 (product. html) ,如 图 14-11 所 示 。 


UniDigital 字 宙 电子 














图 14-11 题 3 图 
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